未知丙反应

目前学习的反应，当我尝试运行下面的代码：未知丙反应

var userData = { 
 
\t name: 'Evans D', 
 
\t occupation: ' Logistics Planner', 
 
\t location: 'Birmingham, UK', 
 
\t img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAlfOT5088Z6Bj8_qSsvp3UTlU3ub9H5wG1k6qJareFXS7uqDvsQ' 
 
}; 
 

 
class userInfo extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     \t <h1>Name: {this.props.user.name} </h1> 
 
     \t <h2>Occupation: {this.props.user.occupation} </h2> 
 
     \t <h3>Location: {this.props.user.location} </h3> 
 
     \t // <img src={this.props.user.img} /> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <userInfo user={userData}/>, 
 
    document.getElementById('userInfo') 
 
);

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

控制台引发以下错误：在标签

“未知道具user。从元素中移除此道具。'

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

来源

2017-07-07 Evans

错误或警告？有没有机会添加完整的信息？我想你可以为你的组件定义propTypes。更令人不安的是，你使用骆驼类的名字，虽然它应该在PascalCase – Icepickle

警告：标签上的未知道具用户。从元素中删除此道具。 – Evans

所以，的确是一个警告，而不是一个错误 – Icepickle

工作的代码你的组件名称应该是PascalCase。当react尝试渲染<userInfo user={userData}/>时，它会认为您在本地DOM节点userInfo上使用非标准DOM属性user（毫无疑问，它不是），因此会引发警告。

来源

2017-07-07 16:21:49 taha

用户道具对我来说似乎很好。不过，我注意到3件事情在你的代码片段中不合适。

你必须在代码片段中使用babeljs/es2015选项来编写JSX。
您需要包含反应库才能使用它。
确保您的组件名称是大写。

见下

var userData = { 
 
\t name: 'Evans D', 
 
\t occupation: ' Logistics Planner', 
 
\t location: 'Birmingham, UK', 
 
\t img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAlfOT5088Z6Bj8_qSsvp3UTlU3ub9H5wG1k6qJareFXS7uqDvsQ' 
 
}; 
 

 
class UserInfo extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     \t <h1>Name: {this.props.user.name} </h1> 
 
     \t <h2>Occupation: {this.props.user.occupation} </h2> 
 
     \t <h3>Location: {this.props.user.location} </h3> 
 
     \t // <img src={this.props.user.img} /> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <UserInfo user={userData}/>, 
 
    document.getElementById('userInfo') 
 
);

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <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>

来源

2017-07-07 16:02:28

感谢您...非常感谢。 – Evans

回答

相关问题