如何传递 child DOM 节点来反应样式组件

Question

我想制作一个 React 组件 MyWrapper 允许我包装其他 child HTML/components 例如

<MyWrapper>
  <div>More code here</div>
</MyWrapper>

在Angular世界里，这叫做嵌入。我对 React 不太熟悉，所以我不确定要搜索什么，或者是否可以使用 Styled Components。

请参阅下面的示例，该示例使用颜色和字体对 header 标题进行了样式化。请注意内容 "Hello World, this is [..]" 是如何 hard-coded。如果可以将内部 HTML 传递给组件并且它可以用这种方式设置任何文本样式，那么这个组件肯定会更有用和可重用。

Answer 1

我想你在找 this.props.children:

class MyWrapper extend React.Component {
  render() {
    return <Wrapper>{this.props.children}</Wrapper>;
  }
}

然后你可以做：

<MyWrapper>
    <div>My code here</div>
</MyWrapper>

How to pass child DOM nodes to react styled components