我可以在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的人:我<ng-transclude/>在React中搜索transclude选项和AngularJS指令的标记.

对于熟悉Polymer的人:我<content/>在React中搜索相应的标签.

UPDATE

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

更新2

将HTML移动到组件的初始化(如JSFiddle的更新中所示)在我的情况下不是一个选项,因为不同的系统呈现初始HTML和React组件.

Answer 1

像这样的东西...

..
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>'

这就是您所指的吗...您可以在此处阅读有关此内容的更多信息。