2014-07-25 79 views
-1

我有一個問題,關於由其他組件組成的反應組件的最佳結構是什麼。 所以第一個是:React js組件依賴關係

<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}> 
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> 

這裏的問題是,我不能訪問ColorSelect fu從ColorOption

nctions

和第二:

<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"} /> 

在這些例子,因爲我想有一個組件,我可以以JSON格式發送屬性

+0

請重寫您的問題,非常清楚地解釋您要做的事情。如果我們不知道你的目標,代碼就沒有意義。 – FakeRainBrigand

回答

2

A組分看到該組件是不容易的重用只有它的一個道具,但其父母可以通過一種方法作爲道具。這是你可以寫ColorOption的方法。

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> 
    } 
}) 

注意,當DIV發出click事件,ColorOption調用它onSelect道具(其text道具作爲參數)。 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) 

就是這樣。