警告：<> 标签上的未知属性。从元素中删除此道具

Question

我是 React 的新手，我正在从 Lynda 的一个示例中学习 subclasses。我正在创建一个名为 aptList 的新子组件 class 并使用 this.props.eachItem.ownerName 遍历 JSON 文件中的每个索引，其中 ownerName 是属性.

这是我在浏览器中运行时遇到的错误。数据已获取，但根据错误

无法识别 prop

但是 React 控制台似乎 JSON 正常

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

Answer 1

将 aptList 重命名为 AptList。

否则 React 将 aptList 视为原生 html 组件，并将触发未知 HTML 属性的警告。

查看异常信息中的link：

You are using a React component without an upper case. React interprets it as a DOM tag because ...

警告：<> 标签上的未知属性。从元素中删除此道具

Warning: Unknown prop on <> tag. Remove this prop from the element

reactjs

prop

subcomponent