目标是在 React 中创建一个 W3C Web 组件，它支持任意 DOM 节点作为子节点。
浏览器中的初始标记应该是这样的：
<custom-button>
some <u>styled</u> text here
</custom-button>
然后我会：
customElements.define()将我的 React 代码注册为custom-button,<custom-button>，ReactDOM.render(<CustomButton ...>, shadowRoot);填充此阴影根浏览器中的 DOM 结构现在是：
<custom-button>
#shadow-root
<div class="CustomButton">
<!-- x -->
</div>
some <u>styled</u> text here
</custom-button>
但这并不是真正想要的结果；我现在需要在<custom-button>里面渲染的原始内容<div class="CustomButton">。
我知道 Reactchildren道具，但据我所知，它仅适用于也在 React 实现中声明的子级，而不适用于在周围 Web 组件元素上创建的任意 DOM 节点。
另一方面，我读到 Angular 实现了一个他们称之为“transclusion”的概念，在这个概念中，他们提供了slots将映射到哪个 DOM 子 Web 组件。React 中有没有类似的东西？
我可以在 React 中想到的一种快速“解决方法”是：
ref顶级 JSX 标签的，ref.parentNoderef新父级不过，这只会涵盖初始化。如果在运行时，其他一些脚本试图将更多子项附加到<custom-button>，或者重新排序或删除以前插入的子项，这可能会失败。
我刚刚意识到<slot />web 组件标准的 解决了这个问题。
所以，要反映<custom-element>React 组件内部的内容，以下就完全够了：
render() {
return (
<div className="customElement">
...
<slot />
...
</div>
);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句