首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何将一个react组件传入到另一个react组件中以转换第一个组件的内容?

如何将一个react组件传入到另一个react组件中以转换第一个组件的内容?
EN

Stack Overflow用户
提问于 2014-09-12 05:13:29
回答 9查看 302.4K关注 0票数 258

有没有办法将一个组件传递给另一个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'));
EN

回答 9

Stack Overflow用户

回答已采纳

发布于 2014-09-12 19:37:02

您可以使用this.props.children呈现组件包含的任何子项:

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

export default () => <Wrap><h1>Hello word</h1></Wrap>
票数 231
EN

Stack Overflow用户

发布于 2017-03-17 08:59:01

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} />
票数 34
EN

Stack Overflow用户

发布于 2018-11-15 00:28:31

你可以将它作为一个普通的道具来传递:foo={<ComponentOne />}

例如:

const ComponentOne = () => <div>Hello world!</div>
const ComponentTwo = () => (
  <div>
    <div>Hola el mundo!</div>
    <ComponentThree foo={<ComponentOne />} />
  </div>
)
const ComponentThree = ({ foo }) => <div>{foo}</div>
票数 30
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25797048

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档