Question

假设您有一个Dropdown React组件：

var Dropdown = React.createClass({
  render: function () {
    return (
      <div className="dropdown" />
    );
  },

  itemSelected: function (item) {
    this.setState({
      value: item.props.value
    });
  }
});

以及相应的Option：

var Option = React.createClass({
  _onClick: function () {
    this.props.onSelect(this);
  },

  render: function () {
    return (
      <div className="item" onClick={this._onClick}>{this.props.value}</div>
    );
  }
});

现在假设你像这样使用这些组件：

var ColorForm = React.createClass({
  render: function () {
    return (
      <div>
        <label>Pick a color</label>
        <Dropdown>
          <Option onSelect={???.itemSelected} value="red" />
          <Option onSelect={???.itemSelected} value="blue" />
          <Option onSelect={???.itemSelected} value="green" />
        </Dropdown>
      </div>
    );
  }
});

请注意 onSelect={???.itemSelected} 位。

如何将父下拉列表的itemSelected方法传递给每个孩子？

我知道如果我创建一个自定义下拉类，这很容易，但这会破坏组件的用途：

var ColorDropdown = React.createClass({
  render: function () {
    return (
      <div className="dropdown">
        <Option onSelect={this.itemSelected} value="red" />
        <Option onSelect={this.itemSelected} value="blue" />
        <Option onSelect={this.itemSelected} value="green" />
      </div>
    );
  },

  itemSelected: function (item) {
    this.setState({
      value: item.props.value
    });
  }
});

Answer 1

您可以使用onSelect，Option和{{1}的组合向Dropdown::render方法中的子this.props.children元素添加React.Children.map属性}：

React.cloneWithProps

所以现在你不需要为每个var React = require('react/addons'); var Option = require('./Option'); var Dropdown = React.createClass({ itemSelected: function (item) { this.setState({ value: item.value }); }, render: function () { var self = this; var children = React.Children.map(this.props.children, function (child) { if (child.type !== Option.type) { return child; } else { return Reat.cloneWithProps(child, { onSelect: function () { self.itemSelected(this); } }); } }); return ( <div className="dropdown"> {children} </div> ); } });孩子设置onSelect：

Item

请参阅单选按钮的类似代码：http://jaketrent.com/post/send-props-to-children-react/

Flux：触发JSX中来自子节点的父方法

1 个答案: