反應中的多個組件

Question

Iam新的反應。

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) 

但它只顯示vijay而不是asd爲什麼？有沒有反應支持它通過兩個道具。

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