Question

我有一个问题，关于反应组件的最佳结构是什么，它由另一个组件组成。所以第一个是：

<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格式发送属性的组件

Answer 1

组件只能看到一个道具，但其父级可以将方法作为道具传递。这就是你可以编写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 prop（其text prop作为参数）。 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)

那就是它。

React js组件依赖

1 个答案: