javascript - 我可以在ReactJS中包含原始元素的子元素吗？

如果我有以下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 :我在React中搜索AngularJS指令的transclude选项和<ng-transclude/>标签。

对于熟悉的人们聚合物:我在React中搜索<content/>标记的等效项。

更新

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

更新2

在我的情况下，将HTML移入组件的初始化中(如update of the JSFiddle所示)不是一个选择，因为呈现初始HTML和React组件的系统不同。

最佳答案

像这样的东西

..
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的更多信息。