当我尝试运行以下代码时,正在学习反应:
var userData = {
name: 'Evans D',
occupation: ' Logistics Planner',
location: 'Birmingham, UK',
img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAlfOT5088Z6Bj8_qSsvp3UTlU3ub9H5wG1k6qJareFXS7uqDvsQ'
};
class userInfo extends React.Component {
render() {
return (
<div>
<h1>Name: {this.props.user.name} </h1>
<h2>Occupation: {this.props.user.occupation} </h2>
<h3>Location: {this.props.user.location} </h3>
// <img src={this.props.user.img} />
</div>
)
}
}
ReactDOM.render(
<userInfo user={userData}/>,
document.getElementById('userInfo')
);
&#13;
<!DOCTYPE html>
<html>
<head>
<title>Github Battle</title>
</head>
<body>
<div id='userInfo'></div>
</body>
</html>
&#13;
Console会抛出以下错误:
标签上的&#39;未知道具user
。从元素中删除此道具。&#39;
关于我做错的任何想法?
答案 0 :(得分:2)
用户道具对我来说似乎很好。但是,我注意到你的片段中有3件不合适的东西。
请参阅下面的工作代码
var userData = {
name: 'Evans D',
occupation: ' Logistics Planner',
location: 'Birmingham, UK',
img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAlfOT5088Z6Bj8_qSsvp3UTlU3ub9H5wG1k6qJareFXS7uqDvsQ'
};
class UserInfo extends React.Component {
render() {
return (
<div>
<h1>Name: {this.props.user.name} </h1>
<h2>Occupation: {this.props.user.occupation} </h2>
<h3>Location: {this.props.user.location} </h3>
// <img src={this.props.user.img} />
</div>
)
}
}
ReactDOM.render(
<UserInfo user={userData}/>,
document.getElementById('userInfo')
);
&#13;
<!DOCTYPE html>
<html>
<head>
<title>Github Battle</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
</head>
<body>
<div id='userInfo'></div>
</body>
</html>
&#13;
答案 1 :(得分:1)
您的组件名称应位于PascalCase中。
当react尝试呈现<userInfo user={userData}/>
时,它会认为您在本机DOM节点user
上使用非标准DOM属性userInfo
(毫无疑问它不是)因此抛出警告。