複数の成分が反応しています。

Question

新しい反応があります。

var Ad=React.createClass({ 
    render:function(){ 
     return(<b>{this.props.name}</b>) 
    } 
}) 
var Az=React.createClass({ 
    render:function(){ 
     return(<b>{this.props.class}</b>) 
    } 
}) 
var Aa=React.createClass({ 
    render:function(){ 
     return(<div> 
      <Ad name={this.props.name}/> 
      <Az name={this.props.class}/> 
      </div>) 
    } 
}) 
ReactDOM.render(<Aa name="vijay" class="Asd"/>,document.body) 

しかし、それはなぜashdではないvijayだけを表示していますか？反応して2つの小道具を渡すことに反応しましたか？

Answer 1

あなたのコンポーネントAzプロパティを期待しているがclassと呼ばれる：

return(<b>{this.props.class}</b>) 

しかし、あなたのコードの中で、あなたが唯一のプロパティnameを提供しています

<Az name={this.props.class}/> 

あなたが動作するためにclassようにそれを変更する必要があります。

ただし、別の問題があります。 classが反応の予約キーワードですので、あなたのコード内で何か他のものにclassを変更する必要があり、たとえばmyclassのために：

// 'class' was changed to 'myclass' in the code below 
var Az=React.createClass({ 
    render:function(){ 
     return(<b>{this.props.myclass}</b>) 
    } 
}) 
var Aa=React.createClass({ 
    render:function(){ 
     return(<div> 
      <Ad name={this.props.name}/> 
      <Az myclass={this.props.myclass}/> 
      </div>) 
    } 
}) 
ReactDOM.render(<Aa name="vijay" myclass="Asd"/>,document.body) 

Answer 2

あなたは直接身体にコンポーネントをレンダリングすることはありません。それは悪い習慣です。理由は次のとおりですlink