-1

別のコンポーネントから構成される反応コンポーネントの最適な構造について質問があります。したがって、最初のものは次のとおりです。

<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 関数にアクセスできないことです。

そして2番目：

<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 関数にアクセスできないことです。

そして2番目：

<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 形式でプロパティを送信できるコンポーネントが必要なため、コンポーネントを再利用するのは簡単ではありません。

4

1 に答える 1

2

コンポーネントはその 1 つの props しか認識しませんが、その親はメソッドを props として渡すことができます。これが 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 がクリック イベントを発行すると、ColorOption がその prop を呼び出すことに注意してくださいonSelect(そのtextprop を引数として)。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、配列でなければならない prop を受け取り、それを ColorOptions の配列に変換します。さらに、そのhandleSelectメソッドを各子に渡し、子がそれを呼び出せるようにします。

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

それでおしまい。

于 2014-07-25T20:47:07.517 に答える