React js components dependency

Question

다른 구성 요소로 구성된 반응 구성 요소의 구조가 무엇인지 궁금합니다. 그래서 첫 번째는 다음과 같습니다

<ColorSelect id="color" 
label={this.state.selectLabel} 
trigger={{ color: "lime", text: "Lime"}} 
onPropagateClick={this.changed}> 
options={[ 
{ color: "yellow", text: "Yellow" }, 
{ color: "orange", text: "Orange" },I have a question regarding what is the best structure for a react component which is composed from another components. 

그래서 첫 번째는 다음과 같습니다 :

여기

<ColorSelect id="color" 
label={this.state.selectLabel} 
trigger={{ color: "lime", text: "Lime"}} 
onPropagateClick={this.changed}> 
<ColorOption color="yellow" text="Yellow" onPropagateClick={ColorSelect.optionClicked}/> 
<ColorOption color="orange" text="Orange" onPropagateClick={ColorSelect.optionClicked}/> 
<ColorOption color="red" text="Red" onPropagateClick={ColorSelect.optionClicked}/> 
</ColorSelect> 

문제가 내가 ColorOption

에서 두 번째

과를 ColorSelect 기능에 액세스 할 수 없다는 것입니다

<ColorSelect id="color" 
label={this.state.selectLabel} 
trigger={{ color: "lime", text: "Lime"}} 
onPropagateClick={this.changed}> 
<ColorOption color="yellow" text="Yellow" onPropagateClick={ColorSelect.optionClicked}/> 
<ColorOption color="orange" text="Orange" onPropagateClick={ColorSelect.optionClicked}/> 
<ColorOption color="red" text="Red" onPropagateClick={ColorSelect.optionClicked}/> 
</ColorSelect> 

여기에서 문제는 ColorSelect fu에 액세스 할 수 없다는 것입니다. ColorOption

에서 nctions

와 두 번째 : 나는 구성 요소가 보는

Answer 1

JSON 형식의 속성을 보낼 수있는 구성 요소를 갖고 싶어하기 때문에 구성 요소를 재사용하는 것은 쉽지 않다 이러한 예에서

<ColorSelect id="color" 
label={this.state.selectLabel} 
trigger={{ color: "lime", text: "Lime"}} 
onPropagateClick={this.changed}> 
options={[ 
{ color: "yellow", text: "Yellow" }, 
{ color: "orange", text: "Orange" }, 
{ color: "red", text: "Red"} /> 

그 하나의 소품 만, 그러나 부모는 소품으로 방법을 전달할 수 있습니다. 이것이 ColorOption을 작성하는 방법입니다. 사업부는 클릭 이벤트를 방출 할 때, ColorOption가 (인수로 자사의 text 소품과)의 onSelect 소품을 호출하는

는

var ColorOption = React.createClass({ 
    render: function() { 
     return <div style={{color: this.props.color}} 
       onClick={this.props.onSelect.bind(null, this.props.text)} 
       >{this.props.text}</div> 
    } 
}) 

알 수 있습니다. onSelect은 부모에 의해 전달되어야하며 이는 정확히 ColorSelect가 수행하는 것입니다.

var ColorSelect = React.createClass({ 
    handleSelect: function(text) { 
     console.log('Color selected:', text) 
    }, 
    render: function() { 
     var options = this.props.options.map(function(option) { 
      return <ColorOption key={option.color} color={option.color} 
        text={option.text} onSelect={this.handleSelect} /> 
     }.bind(this)) 
     return <div>{options}</div> 
    } 
}) 

ColorSelect 배열이어야합니다 options 소품을 취하고, ColorOptions 배열로 만들어 버린다. 또한 각 자식에게 handleSelect 메서드를 전달하여 호출 할 수 있도록합니다.

var options = [ 
    { color: "yellow", text: "Yellow" }, 
    { color: "orange", text: "Orange" }, 
    { color: "red", text: "Red"}, 
] 
React.renderComponent(<ColorSelect options={options} />, document.body) 

그렇습니다.