-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 函数

第二：

<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}>
options={[
{ color: "yellow", text: "Yellow" },
{ color: "orange", text: "Orange" },
{ color: "red", text: "Red"} />

在这些示例中，组件不容易重用，因为我想要一个组件，我可以在其中以 json 格式发送属性

4

1 回答 1

2

一个组件只能看到它的一个 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 会调用它的onSelectprop（以它的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必须是数组的道具，并将其转换为 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 回答