React如何具体实现插槽效果的技术方案解析？

本文共计1018个文字，预计阅读时间需要5分钟。

目录- React实现插槽- children实现插槽- props实现插槽- React实现插槽组件- 在开发中，我们抽取了一个组件，但为了使这个组件具备更强的通用性，我们不得不将组件中的内容限制为固定的div、span等元素。

目录

• React实现插槽
• children实现插槽
• props实现插槽

React实现插槽

在开发中，我们抽取了一个组件，但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素。

我们应该让使用者可以决定某一块区域到底存放什么内容

这种需求在Vue当中有一个固定的做法是通过slot来完成的，React呢？

在React中是没有插槽的概念的, 或者说在React中是不需要插槽的, 因为React对于这种需要插槽的情况非常灵活，有两种方案可以实现：

组件的children子元素；

props属性传递React元素；

children实现插槽

每个组件都可以获取到 props.children：它包含组件的开始标签和结束标签之间的内容。