Flux：从 JSX 中的子级触发父方法

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 方法传递给每个孩子？

我知道如果我创建一个 custom 下拉类，这很容易，但这违背了组件的目的：

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

您可以使用this.props.children、React.Children.map 和React.cloneWithProps 的组合在Dropdown::render 方法内将onSelect 属性添加到子Option 元素：

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

所以现在您不需要为每个Item 孩子设置onSelect：

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

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