有没有一种方法将一个组件传递到另一个react组件中？我想创建一个模型react组件，并传入另一个react组件，以便迁移该内容。
编辑:这里有一个reactJS代码，说明了我要做的事情。http://codepen.io/aallbrig/pen/Behjo
HTML
<div id="my-component">
<p>Hi!</p>
</div>
ReactJS
/**@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'));
您可以使用this.props.children呈现组件包含的任何子组件:
const Wrap = ({ children }) => <div>{children}</div>
export default () => <Wrap><h1>Hello word</h1></Wrap>
注:我在这里提供了一个更深入的答案
这是最地道的方式。
const Wrapper = ({children}) => (
<div>
<div>header</div>
<div>{children}</div>
<div>footer</div>
</div>
);
const App = () => <div>Hello</div>;
const WrappedApp = () => (
<Wrapper>
<App/>
</Wrapper>
);
请注意，childress是React中的“特殊道具”，上面的示例是语法上的糖，并且（几乎）相当于
您可以使用高阶组件(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的呈现，而在运行时包装器的情况下，子属性可能总是不同的响应，并且导致重新呈现，即使您的组件扩展了pureComponent。
请注意，Redux的connect以前是运行时包装器，但现在更改为HOC，因为如果您使用pure选项（默认情况下为真），它允许避免无用的重新呈现
您不应该在呈现阶段调用HOC，因为创建React组件可能会非常昂贵。您应该在初始化时调用这些包装器。
请注意，当使用上述功能组件时，HOC版本没有提供任何有用的优化，因为无状态功能组件没有实现ShouldComponentUpdate
更多解释:https://stackoverflow.com/a/31564812/82609
const ParentComponent = (props) => {
return(
{props.childComponent}
//...additional JSX...
)
}
//import component
import MyComponent from //...where ever
//place in var
const myComponent = <MyComponent />
//pass as prop
<ParentComponent childComponent={myComponent} />
