如何巧妙运用React插槽实现组件复用和扩展？

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

目录 + 需求 + 核心思想 + React实现插件的两种方式 + 需求 + 我们自己写了一个组件，引用组件时想在组件中写入内容，写入的内容可被组件识别、控制，用过Vue的同学可能瞬间想到sl

目录

• 需求
• 核心思想
• React实现插槽的两种方式

需求

我们自己写了个组件，引用组件时想要在组件中写入内容，并且写入的内容可以被组件识别、控制，用过Vue的同学肯定会立刻想到slot插槽，react也支持插槽功能，下面我们用react开发一个支持插槽功能的组件。

核心思想

父组件在子组件中传入的三个div，这三个div会默认通过props传到子组件中，然后我们在子组件中控制children的渲染即可。