如何通过组件的Java评估传递道具？

Question

I've got the following code:

Layout = React.createClass({
  render() {
    return (
      <div>
        <header>
          <div className="container">
            <button className="btn btn-sm pull-right"
                    onClick={this.handleLogout}>LogOut
            </button>
          </div>
        </header>

        <div className="container">
          {this.props.content}
        </div>
      </div>
    );
  }
});

The Layout component serves as my shell. I pass it other "pages" which will get rendered with it (don't worry so much about this code, it's specific to Meteor):

ReactLayout.render(Layout, {content: <Home />});

My problem is, I want Layout to be able to pass props down to its children. In pseudo-code:

<div className="container">
  {this.props.content someProp=this.props.someProp}
</div>

How do I go about doing this?

Answer 1

There a couple ways to go about passing the props to the children, but a simple way that we have a utility method for doing so is with React.cloneElement .

renderChildren() {
  const someProps = { content : this.props.conent }// Filter props to pass
  return React.Children.map(this.props.children, function(child) {
    return React.cloneElement(child, someProps)
  });
}

render() {
//...
  <div className="container">
    {this.renderChildren()}
  </div>
//...
}

https://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement

As an example fiddle on how this looks and so you can test yourself: https://jsfiddle.net/jhuwhjp1/

~~ Note: The previous way of doing this was React.addons.cloneWithProps which has been deprecated

Answer 2

Figured it out. Points to cdbitesky for pointing me in the right direction.

This render function in Layout will take whatever content I pass it (a React component) and pass it any of Layout 's props.

Layout = React.createClass({
  getDefaultProps() {
    /*
     * This will get passed down to whatever React component was passed to
     * Layout via the prop "content"
     */
    return {awesomeness: true}
  },

  render() {
    return (
      <div>
        <header>
          <div className="container">
            <button className="btn btn-sm pull-right"
                    onClick={this.handleLogout}>LogOut
            </button>
          </div>
        </header>

        <div className="container">
          {React.cloneElement(this.props.content, this.props)}
        </div>
      </div>
    );
  }
});