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

Question

我想创建一个React组件MyWrapper，允许我包装其他子HTML /组件，如

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

在Angular世界中，这称为 transclusion 。我不熟悉React，因此我不确定要搜索什么，或者甚至可以使用样式组件。

请参阅下面的示例，该示例使用颜色和字体对标题标题进行样式化。注意内容＆＃34; Hello World，这是[..]＆＃34;是硬编码的。当内部HTML可以传递给组件并且它可以通过这种方式设置任何文本样式时，这个组件肯定会更有用和可重用。

https://github.com/styled-components/styled-components#example

Answer 1

我认为您正在寻找this.props.children：

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

然后你可以这样做：

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