如何将反应组分传递到另一个反应组分以跨越第一个组分的内容？
有没有办法将一个组件传递到另一个反应组件？ 我想创build一个模型反应组件，并传入另一个反应组件，以便跨越该内容。
编辑：这是一个reactJS codepen说明我正在尝试做什么。 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'));
注意我在这里提供了一个更深入的答案
运行时包装器：
这是最习惯的方式。
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);
这可能会导致（很less）更好的性能，因为包装器组件可以使用shouldComponentUpdate提前一步将渲染短路，而对于运行时包装器，子prop可能总是不同的ReactElement并导致重新呈现即使您的组件扩展了PureComponent。
请注意，Redux的connect曾经是一个运行时包装，但已被更改为HOC，因为如果使用pure选项（默认情况下为true），则允许避免无用的重新渲染，
您不应该在渲染阶段调用HOC，因为创buildReact组件可能很昂贵。 您应该在初始化时调用这些包装。
请注意，使用上述function组件时，HOC版本不提供任何有用的优化，因为无状态function组件不会实现shouldComponentUpdate
更多的解释在这里： https : //stackoverflow.com/a/31564812/82609
您可以使用this.props.children呈现该组件包含的this.props.children ：
var Wrap = React.createClass({ render: function() { return <div>{ this.props.children }</div>; } }); var App = React.createClass({ render: function() { return <Wrap><h1>Hello word</h1></Wrap>; } });
Facebook推荐无状态组件使用来源： https ： //facebook.github.io/react/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 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} />
你可以通过一个组件。 道具和插值渲染。
var DivWrapper = React.createClass({ render: function() { return <div>{ this.props.child }</div>; } });
然后你会传入一个名为child的prop ，这将是一个React组件。
我更喜欢使用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 };
那么你可以用你想要的东西replace包装div：
<Test wrapper={<span className="LOL"/>}> <div>child1</div> <div>child2</div> </Test>
