javascript - 如何传递子 DOM 节点来 react 样式组件

Question

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

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

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

请参阅下面的示例，该示例使用颜色和字体对标题进行样式化。请注意内容“Hello World，这是 [..]”是如何硬编码的。当然，如果内部 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>