未知的反应

时间:2017-07-07 15:58:57

标签: javascript class reactjs

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



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;
&#13;
&#13;

Console会抛出以下错误:

标签上的

&#39;未知道具user。从元素中删除此道具。&#39;

关于我做错的任何想法?

2 个答案:

答案 0 :(得分:2)

用户道具对我来说似乎很好。但是,我注意到你的片段中有3件不合适的东西。

  1. 你必须在代码片段中使用babeljs / es2015选项来编写JSX。
  2. 您需要包含反应库才能使用它。
  3. 确保您的组件名称已大写。
  4. 请参阅下面的工作代码

    &#13;
    &#13;
    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;
    &#13;
    &#13;

答案 1 :(得分:1)

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