如何传递子 DOM 节点以响应样式组件答案

【问题标题】：How to pass child DOM nodes to react styled components如何传递子 DOM 节点以响应样式组件
【发布时间】：2018-09-24 06:19:15
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

我想你在找this.props.children:

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

然后你可以这样做：

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

【讨论】：