警告：<>タグで不明な小道具。要素からこの小道具を外す

Question

私は反応が新しく、私はLyndaの例の1つからサブクラスを学んでいました。 aptListという新しいサブコンポーネントクラスを作成し、this.props.eachItem.ownerNameを使用して、JSONファイルの各インデックスを反復処理します（ownerNameはプロパティです）。

これはブラウザで実行したときのエラーです。データがフェッチなるが、propは、しかし、インクルードは、コンソールが教示されているようにこれはコードである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を見る

あなたはアッパーケースなしで反応させコンポーネントを使用しています。それはそう反応し、コンポーネント名は大文字であることを、「業界標準」だ