当我尝试运行以下代码时,当前正在学习做出反应:



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')
);

<!DOCTYPE html>
<html>
<head>
	<title>Github Battle</title>
</head>
<body>
<div id='userInfo'></div>
</body>
</html>





控制台抛出以下错误:

'标签上的未知道具user。从元素中移除此道具。

关于我在做什么错的任何想法吗?

最佳答案

您的组件名称应在PascalCase中。
当react尝试渲染<userInfo user={userData}/>时,它将认为您在本机DOM节点user上使用了非标准DOM属性userInfo(毫无疑问不是),因此引发了警告。

关于javascript - 未知的 react ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44975185/

10-13 01:13