有没有办法将一个组件传递给另一个react组件?我想创建一个模型react组件，并传入另一个react组件，以透光该内容。
编辑:这里是一个reactJS代码，说明了我正在尝试做什么。http://codepen.io/aallbrig/pen/bEhjo
HTML
<div id="my-component">
<p>Hi!</p>
</div>
反应
/**@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'));
Facebook建议使用无状态组件
来源:https://web.archive.org/web/20160608001717/http: / / facebook.github.io / / docs / reusable-components.html反应
在理想的情况下，大多数组件都是无状态的
函数，因为在未来我们还会研究性能
特定于这些组件的优化，避免不必要的
检查和内存分配。这是推荐的模式
可能的。
function Label(props){
return <span>{props.label}</span>;
}
function Hello(props){
return <div>{props.label}{props.name}</div>;
}
var hello = Hello({name:"Joe", label:Label({label:"I am "})});
ReactDOM.render(hello,mountNode);
Facebook建议使用无状态组件
来源:https://web.archive.org/web/20160608001717/http: / / facebook.github.io / / docs / reusable-components.html反应
在理想的情况下，大多数组件都是无状态的
函数，因为在未来我们还会研究性能
特定于这些组件的优化，避免不必要的
检查和内存分配。这是推荐的模式
可能的。
function Label(props){
return <span>{props.label}</span>;
}
function Hello(props){
return <div>{props.label}{props.name}</div>;
}
var hello = Hello({name:"Joe", label:Label({label:"I am "})});
ReactDOM.render(hello,mountNode);
注意，我在这里提供了一个更深入的答案
运行时包装:
这是最地道的方式。
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提前一步短路呈现，而在运行时包装器的情况下，子道具可能总是不同的ReactElement，并导致重新呈现，即使您的组件扩展了PureComponent。
请注意，Redux的connect曾经是一个运行时包装器，但被更改为HOC，因为如果您使用pure选项(默认为true)，它允许避免无用的重新渲染。
你不应该在渲染阶段调用HOC，因为创建React组件的开销很大。您应该在初始化时调用这些包装器。
请注意，当使用上述功能组件时，HOC版本不提供任何有用的优化，因为无状态功能组件不实现shouldComponentUpdate
更多解释请访问:https://stackoverflow.com/a/31564812/82609
