警告：在 <> 标签上出现未知 prop。请从元素中删除此 prop。

Question

我刚开始学习React，从Lynda的一个示例中学习子类。我正在创建一个名为aptList的新子组件类，并使用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')
);

- Aswin

---

"行业标准"要求组件名大写，否则 React 会认为它处理的是 HTML 标签，并检查允许使用的属性。 - Foxhoundn

Answer 1

将 aptList 重命名为 AptList。

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

请查看异常信息中的链接：

4. 你正在使用一个首字母小写的 React 组件。React 将其解释为 DOM 标签，因为...

- Sulthan