我可以在 ReactJS 中排除原始元素的子元素吗?

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

本文关键字：元素 原始 ReactJS 排除 我可以      更新时间：2023-09-26

如果我有以下 HTML：

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

我将 ReactJS 组件初始化为 #myreactcomponentdiv，我可以以某种方式渲染组件内的 h1 和 p 元素吗？像这样：

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

在 ReactJS 中是否有一个选项？

你可以检查这个JSFiddle以查看我的问题的演示。

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

对于熟悉 Polymer 的人：我在 React 中搜索相当于 <content/> 标签的内容。

更新

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

更新 2

在我的情况下，将 HTML 移动到组件的初始化中（如 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>'

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

是的，要执行此操作，请使用this.props.children .

例如，如果你有一个 React 组件，如下所示：

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

您可以通过在MyReactComponent render中执行此操作来h1和p传输子元素：

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

是的，这是可能的。

在反应类中，你有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

相关文章：