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

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

让我们创建一个包装器组件：

 export const Wrapper = (props) => {
 return(<>
 <Menu />
 {props.children}
 <Footer />
 </>
 )
 }

您现在可以将新的封装到现有结构中。

您将在 Route 中包含组件，例如：

 <Route path="/" element={<Wrapper><ExampleComponent /></Wrapper>} />

原文由 assayag.org 发布，翻译遵循 CC BY-SA 4.0 许可协议