반응 중 다중 구성 요소

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) 

하지만 비제이가 아닌 이유는 무엇입니까? 반응하여 두 개의 소품을 통과 시켰습니다.

Answer 1

구성 요소 Az는 class라는 속성을 기대하고있다 :

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

을하지만 코드에서 당신은 전용 속성 name를 제공하고 있습니다 :

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

당신은 일을하기 위해 class 수를 변경해야합니다.

그러나 다른 문제가 있습니다.

// '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

당신은 직접 몸에 구성 요소를 렌더링해서는 안 : 당신이 예를 myclass를 들어, 코드에서 다른 것으로 class을 변경해야하므로 class은에 반응 예약 된 키워드입니다. 나쁜 습관입니다. 이유는 다음과 같습니다. link