我可以在 ReactJS 中嵌入原始元素的子元素吗？

Question

如果我有以下HTML:

<div id="myreactcomponent">
  <h1>Headline</h1>
  <p>Content</p>
</div>

然后我将 ReactJS 组件初始化为 #myreactcomponent div，我可以以某种方式在组件内渲染 h1 和 p 元素吗？类似的东西：

return (
  <Header></Header>
  { place h1 and p here }
  <Footer></Footer>
);

ReactJS 中有这个选项吗？

您可以查看此 JSFiddle 以查看我的问题的演示。

对于熟悉Angular的人：我搜索了Angular的嵌入选项和<ng-transclude/>标签React 中的 JS 指令。

对于熟悉 Polymer 的人：我在 React 中搜索了 <content/> 标签的等价物。

更新

我尝试了 this.props.children 属性，但据我所知，这仅在初始 HTML 已经在 React 组件中时有效。我真的需要渲染我最初渲染第一个 React 组件的元素的子元素。

更新 2

将 HTML 移动到组件的初始化中（如 update of the JSFiddle 所示）在我的情况下不是一个选项，因为呈现初始 [=53= 的不同系统] 和 React 组件。

Answer 1

是的，为此使用 this.props.children。

例如，如果您有一个像这样使用的 React 组件：

<MyReactComponent>
  <h1>Headline</h1>
  <p>Content</p>
</MyReactComponent>

您可以转移子元素 h1 和 p，方法是在 MyReactComponent 的 render 中执行此操作：

return (
  <Header></Header>
  { this.props.children }
  <Footer></Footer>
);

Answer 2

是的，这是可能的。

在反应中 class 你有 this.props.children

所以在父组件中：

function render() {
  return <MyComponent><div class="my-child">My text</div></MyComponent>;
}

然后在子组件中

function render() {
  return <div class="child-wrapper">{this.props.children}</div>;
}

https://facebook.github.io/react/tips/children-props-type.html

Answer 3

像这样...

..
render(){
return (
<Header></Header>
<span dangerouslySetInnerHTML={{__html:'content'}}></span>
<Footer></Footer>
)
}
..
var content = '<h1>This is a header</h1><p>This is some para..</p>'

这是您指的吗...您可以阅读更多相关信息 here。

我可以在 ReactJS 中嵌入原始元素的子元素吗？

Can I transclude the children of the original element in ReactJS?

javascript

reactjs

react-jsx

angularjs-ng-transclude