如何将一个反应组件传入另一个反应组件以嵌入第一个组件的内容? [英] How to pass in a react component into another react component to transclude the first component's content?

问题描述

有没有办法将一个组件传递给另一个 React 组件?我想创建一个模型反应组件并传入另一个反应组件以嵌入该内容.

这是一个 reactJS 代码笔，说明了我正在尝试做的事情.http://codepen.io/aallbrig/pen/bEhjo

HTML

<p>嗨！</p>

ReactJS

/**@jsx React.DOM*/var BasicTransclusion = React.createClass({渲染:函数(){//'Added title'下面应该是<p>Hi!</p>的子内容返回 (<div><p>添加标题</p>{this.props.children}

)}});React.renderComponent(BasicTransclusion(), document.getElementById('my-component'));

解决方案

您可以使用 this.props.children 来渲染组件包含的任何子项:

const Wrap = ({ children }) =><div>{儿童}</div>导出默认值 () =><Wrap><h1>Hello word</h1></Wrap>

Is there a way to pass one component into another react component? I want to create a model react component and pass in another react component in order to transclude that content.

Edit: Here is a reactJS codepen illustrating what I'm trying to do. 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'));

解决方案

You can use this.props.children to render whatever children the component contains:

const Wrap = ({ children }) => <div>{children}</div>

export default () => <Wrap><h1>Hello word</h1></Wrap>

这篇关于如何将一个反应组件传入另一个反应组件以嵌入第一个组件的内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！