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

Question

so I am trying to create a sort of abstract 'framework' for different parts I will be reusing on my site.

So right now I am working on a modal, which consists of:

• A title
• Its content
• Actions (buttons like cancel, save etc.)

How I want to write it would be:

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

This would allow me to change the content, title and add specific actions for each modal, here's some code for the different parts:

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

The title is very simple, but this abstracts the classname, and lets me add different things inside if I would need it.

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

Content is pretty much the same as the title.

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

Now for the actions, and where I need help:

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

Now, as you see, I have already included a save action for the actions, since I want to have it on every modal, but the problems is with how can I access 's save function? I don't think I would be able to pass it as a prop from the parent, and I guess would have to intercept its children, check for the and give it a prop to its save function, but I cannot find any good information on how to do it properly, less how to identify which one of it's children are the actions one.

The other way I believe would work best is if I can expose the save function to all children, and only act upon it on the save action. This would also allow me to write custom actions that takes advantage of the 's 'API'.

Still, haven't found any good info on how I would be able to do this, any ideas?

Answer 1

You can use React.Children to iterate over the children, and then clone each element with new props (shallow merged) using React.cloneElement

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

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