[英]Warning: Unknown prop on <> tag. Remove this prop from the element
I'm new to react and i was learning subclasses from one of Lynda examples.我刚开始反应,我正在从 Lynda 示例之一中学习子类。 I'm creating a new subcomponent class called
aptList
and using this.props.eachItem.ownerName
to iterate through each index from the JSON file where ownerName
is a property.我正在创建一个名为
aptList
的新子组件类,并使用this.props.eachItem.ownerName
遍历 JSON 文件中的每个索引,其中ownerName
是一个属性。
This is the error i get when i run it in the browser.这是我在浏览器中运行时得到的错误。 The data gets fetched but the
prop
is not getting recognized according to the error数据被获取,但
prop
没有根据错误被识别
however the react console seems to be getting the JSON fine然而反应控制台似乎得到了很好的 JSON
This is the code as taught on Lynda这是 Lynda 教授的代码
var React = require('react');
var ReactDOM = require('react-dom');
var createReactClass = require('create-react-class');
var aptList = createReactClass({
render: function(){
return(
<li>{ this.props.eachItem.ownerName }</li>
);
}
});
var MainInterface = createReactClass({
getInitialState: function(){
return {
title: 'Items',
show: function(x){
if(x>10){
return true
}
else {
return false
}
},
myData: []
}
},
componentDidMount: function(){
this.serverRequest = $.getJSON('static/scripts/src/myData.json', function(results){
var tempData = results;
this.setState({
myData: tempData
});
}.bind(this));
},
componentWillUnmount: function(){
this.serverRequest.abort();
},
render: function(){
var style = {
color: 'red',
fontWeight: 900
};
var reactData = this.state.myData;
reactData = reactData.map(function (each, index) {
return (
<aptList eachItem = { each }
key = { index }/>
)
}.bind(this));
return (
<div>
<h1>{ this.state.show(12) ? 'List of ':null }{ this.state.title }</h1>
<ul style={style}>
{ reactData }
</ul>
</div>
)
}
});
ReactDOM.render(
<MainInterface/>,
document.getElementById('testid')
);
Rename aptList
to AptList
.将
aptList
重命名为AptList
。
Otherwise React considers aptList
to be a native html component and will trigger warnings for unknown HTML properties.否则 React
aptList
视为原生 html 组件,并将触发未知 HTML 属性的警告。
See the link in the exception message:请参阅异常消息中的链接:
- You are using a React component without an upper case.
您正在使用没有大写的 React 组件。 React interprets it as a DOM tag because ...
React 将其解释为 DOM 标签,因为...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.