有没有办法将一个组件传递给另一个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'));
注意，我在这里提供了一个更深入的答案
运行时包装:
这是最地道的方式。
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
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);
我更喜欢使用React内置API:
import React, {cloneElement, Component} from "react";
import PropTypes from "prop-types";
export class Test extends Component {
render() {
const {children, wrapper} = this.props;
return (
cloneElement(wrapper, {
...wrapper.props,
children
})
);
}
}
Test.propTypes = {
wrapper: PropTypes.element,
// ... other props
};
Test.defaultProps = {
wrapper: <div/>,
// ... other props
};
然后你可以用你想要的东西替换包装器div:
<Test wrapper={<span className="LOL"/>}>
<div>child1</div>
<div>child2</div>
</Test>
实际上，您的问题是如何编写高阶组件(HOC)。使用HOC的主要目标是防止复制粘贴。你可以把你的HOC写成一个纯功能组件或一个类，这里有一个例子:
class Child extends Component {
render() {
return (
<div>
Child
</div>
);
}
}
如果你想把你的父组件写成一个基于类的组件:
class Parent extends Component {
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
如果你想把你的父组件写成一个函数组件:
const Parent = props => {
return (
<div>
{props.children}
</div>
);
}
