如何将一个反应组件传递给另一个反应组件以包含第一个组件的内容？

Question

有没有办法将一个组件传递给另一个反应组件？我想创建一个模型反应组件并传入另一个反应组件以嵌入该内容。

编辑：这是一个 reactJS 代码笔，说明了我正在尝试做的事情。 http://codepen.io/aallbrig/pen/bEhjo

HTML

<div id="my-component">
    <p>Hi!</p>
</div>

反应JS

/**@jsx React.DOM*/

var BasicTransclusion = React.createClass({
  render: function() {
    // Below 'Added title' should be the child content of <p>Hi!</p>
    return (
      <div>
        <p> Added title </p>
        {this.props.children}
      </div>
    )
  }
});

React.renderComponent(BasicTransclusion(), document.getElementById('my-component'));

原文由 Andrew Allbright 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 this.props.children 来渲染组件包含的任何子项：

 const Wrap = ({ children }) => <div>{children}</div>

 export default () => <Wrap><h1>Hello word</h1></Wrap>

原文由 David Hellsing 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

注意我在 这里 提供了更深入的答案

运行时包装器：

这是最惯用的方式。

 const Wrapper = ({children}) => (
  <div>
    <div>header</div>
    <div>{children}</div>
    <div>footer</div>
  </div>
);

const App = () => <div>Hello</div>;

const WrappedApp = () => (
  <Wrapper>
    <App/>
  </Wrapper>
);

请注意 children 是 React 中的“特殊道具”，上面的示例是语法糖并且（几乎）等同于 <Wrapper children={<App/>}/>

---

初始化包装器/HOC

您可以使用 高阶组件(HOC)。它们最近已被添加到 官方文档 中。

 // Signature may look fancy but it's just
// a function that takes a component and returns a new component
const wrapHOC = (WrappedComponent) => (props) => (
  <div>
    <div>header</div>
    <div><WrappedComponent {...props}/></div>
    <div>footer</div>
  </div>
)

const App = () => <div>Hello</div>;

const WrappedApp = wrapHOC(App);

这可以带来（一点点）更好的性能，因为包装器组件可以使用 shouldComponentUpdate 提前一步缩短渲染，而在运行时包装器的情况下，children prop 可能总是不同的 ReactElement 并导致重新渲染即使您的组件扩展了 PureComponent。

请注意，Redux 的 connect 曾经是运行时包装器，但已更改为 HOC，因为如果您使用 pure 选项（默认情况下为真），它允许避免无用的重新渲染)

你永远不应该在渲染阶段调用 HOC，因为创建 React 组件的成本可能很高。您应该在初始化时调用这些包装器。

---

请注意，当使用上述功能组件时，HOC 版本不会提供任何有用的优化，因为无状态功能组件不会实现 shouldComponentUpdate

更多解释在这里： https ://stackoverflow.com/a/31564812/82609

原文由 Sebastien Lorber 发布，翻译遵循 CC BY-SA 3.0 许可协议