React –向其子组件公开组件功能

Question

因此，我尝试为要在网站上重复使用的不同部分创建一种抽象的“框架”。

所以现在我正在研究一个模态，包括：

• 一个标题
• 其内容
• 操作（取消，保存等按钮）

我要写的是：

<Modal> // <- This wrapper contains different functions for controlling the entire modal.
  <ModalTitle>Editing</ModalTitle>
  <ModalContent>
    <form>
      <input type="text"/>
    </form>
  </ModalContent>
  <ModalActions/> // <- This one is empty since I already have save buttons as a default for it.
</Modal>

这将允许我更改内容，标题并为每个模式添加特定的操作，以下是不同部分的一些代码：

var Modal = React.createClass({
  close: function() {
    this.props.onUserClose();
  },
  save: function() {
    // validates inputs from a form, sends it back, and closes the modal
  },
  render: function() {
    return (
      <dialog className="mdl-dialog" ref="modal">
        <button
          type="button"
          className="mdl-button mdl-js-button mdl-button--icon helper-modal-button--close"
          onClick={this.close}  
        >
          <i className="material-icons">clear</i>
        </button>
        {this.props.children}
      </dialog>
    );
  }
};

标题很简单，但这抽象了类名，如果需要的话，可以在其中添加其他内容。

var ModalTitle = React.createClass({
  render: function() {
    return (
      <h2 className="mdl-dialog__title">{this.props.children}</h2>
    );
  }
});

内容与标题几乎相同。

var ModalContent = React.createClass({
  render: function() {
    return (
      <div className="mdl-dialog__content">
        <form id="modal-form">{this.props.children}</form>
      </div>
    );
  }
});

现在就采取行动，在需要帮助的地方：

var ModalActions = React.createClass({
  render: function() {
    return (
      <div className="mdl-dialog__actions">
        <button type="button" className="mdl-button" onClick={this.save}>Save</button>
        {this.props.children}
      </div>
    );
  }
});

如您所见，现在，我已经为这些动作添加了一个save动作，因为我想在每个模式中都使用它，但是问题在于如何访问的save函数？ 我认为我无法将其作为道具从父母那里传递，我想必须拦截它的孩子，检查并为它的保存功能提供道具，但是我找不到关于它的任何良好信息。如何正确地做到这一点，少了如何识别行动的孩子之一。

我认为最好的另一种方法是，我可以将保存功能公开给所有子级，并且仅在保存操作上对其执行操作。 这也将允许我编写利用'API'的自定义操作。

不过，还没有找到有关如何进行此操作的任何好信息，有什么想法吗？

Answer 1

您可以使用React.Children遍历子级，然后使用React.cloneElement用新的道具（浅合并）克隆每个元素。

render: function() {
    const childrenWithProps = React.Children.map(this.props.children,
     (child) => React.cloneElement(child, {
       doSomething: this.doSomething
     })
    );

    return <div>{childrenWithProps}</div>
  }