脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react插槽slot

详解react实现插槽slot功能

 更新时间：2025年09月21日 11:10:13   作者：树上有只程序猿  
本文主要介绍了详解react实现插槽slot功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

背景

在开发一个需求时，需要对原来的 form 表单组件代码复用并进行拓展。
场景A 使用原来的 form 表单组件。
场景B 在原来的表单组件基础上，新增一些表单项，新增表单项位置动态插入在原来的表单组件中，位置随意。

需求

复用表单组件，同时支持新增表单项。

解决方案

在 React 中，组件扩展和定制的能力，可以通过 props.children 和 render props 来实现。

以上两种方式的缺点是：如果插入位置比较分散，需要定义children对象或多个 props，代码繁琐，不易维护。调研下来，目前貌似没其他好的方法... 欢迎补充

props.children

props.children 直接将内容作为一个HTML内嵌结构编写，将组件参数与内嵌结构分开写。
children 可以是一个字符串， 数组，对象等类型。可以使用 React.Children 的方法来判断props.children 类型并处理。

function Father() {
    return (
        <div>
            我是父组件Father
            <Form1>
              <div>我是子组件Form1的children</div>
            </Form1>
            <Form2>
                {{
                    title: (<div>我是子组件Form2的title</div>),
                    content: (<div>我是子组件Form2的content</div>)
                }}
            </Form2>
        </div>
    )
}

function Form1(props) {
    return (
        <div>
            我是子组件Form1
            {props.children}
        </div>
    )
}

function Form2(props) {
    return (
        <div>
            我是子组件Form2
            {props.children.title}
            {props.children.content}
        </div>
    )
}

render props

通过 props 参数传入 JSX 元素的方法渲染，告知组件需要渲染什么内容的函数 prop。可以定义多个 props 参数，不同位置渲染不同的 props。

function Father() {
    return (
        <div>
            我是父组件Father
            <Form1
              children={<div>我是子组件Form1的children</div>}
            />
            <Form2
              title={<div>我是子组件Form2的title</div>}
              content={<div>我是子组件Form2的content</div>}
            />
        </div>
    )
}

function Form1(props) {
    return (
        <div>
            我是子组件Form1
            {props.children}
        </div>
    )
}

function Form2(props) {
    return (
        <div>
            我是子组件Form2
            {props.title}
            {props.content}
        </div>
    )
}

dataset

React 没有专门的插槽，根据 children/props 的特性，加上只读属性 dataset 实现一个类似的插槽功能。

非必要不使用，代码会更加繁琐。
如果有条件判断是否展示，可以灵活设置 dataset 值使用。

function Father() {
  return (
    <div>
      我是父组件Father
      <Form1
        type='text1'
        title={<div>我是子组件Form的title</div>}
        bottom={<div>我是子组件Form的bottom</div>}
      >
        <div data-type='text1'>
          <label>性别：</label>
          <input type="text" name="gender" />
        </div>
        <div data-type='text1,text2'>
          <label>身高：</label>
          <input type="text" name="height" />
        </div>
        <div data-type='text2,text3'>
          <label>体重：</label>
          <input type="text" name="weight" />
        </div>
      </Form1>
    </div>
  )

到此这篇关于详解react实现插槽slot功能的文章就介绍到这了,更多相关react插槽slot内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React useCallback使用方法详解

    React useCallback使用方法详解

    useCallback 是 React 的一个 Hook,用于记忆函数定义,避免在每次渲染时创建新的函数实例,本文主要来介绍一下它的具体用法,需要的可以参考一下
    2025-01-01
  • React实现TabBar切换与高亮功能

    React实现TabBar切换与高亮功能

    文章介绍了通过React Router的Route组件的exact属性实现精确匹配路由路径,并在路由切换时执行菜单高亮逻辑,通过componentDidUpdate生命周期方法判断路由地址是否切换来实现菜单项的高亮效果,需要的朋友可以参考下
    2026-05-05
  • react实现Radio组件的示例代码

    react实现Radio组件的示例代码

    这篇文章主要介绍了react实现Radio组件的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • react-diagram 序列化Json解读案例分析

    react-diagram 序列化Json解读案例分析

    今天带来大家学习react-diagram 序列化Json解读的相关知识，本文通过多种案例给大家分析序列化知识，通过图文并茂的形式给大家介绍的非常详细，感兴趣的朋友一起看看吧
    2021-05-05
  • react-router实现跳转传值的方法示例

    react-router实现跳转传值的方法示例

    这篇文章主要给大家介绍了关于react-router实现跳转传值的相关资料，文中给出了详细的示例代码，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
    2017-05-05
  • react中实现拖拽排序react-dnd功能

    react中实现拖拽排序react-dnd功能

    这篇文章主要介绍了react中实现拖拽排序react-dnd功能,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-02-02
  • 深入了解React中的合成事件

    深入了解React中的合成事件

    React 中的事件，是对原生事件的封装，叫做合成事件。这篇文章主要通过几个简单的示例为大家详细介绍一下React中的合成事件，感兴趣的可以了解一下
    2023-02-02
  • React学习笔记之列表渲染示例详解

    React学习笔记之列表渲染示例详解

    最近在学习React，学习到了列表渲染这一块，发现网上这方面的资料较少，所以自己来总结下，下面这篇文章主要给大家介绍了关于React学习笔记之列表渲染的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-08-08
  • 教你应用 SOLID 原则整理 React 代码之单一原则

    教你应用 SOLID 原则整理 React 代码之单一原则

    这篇文章主要介绍了如何应用 SOLID 原则整理 React 代码之单一原则,今天，我们将从一个糟糕的代码示例开始，应用 SOLID 的第一个原则，看看它如何帮助我们编写小巧、漂亮、干净的并明确责任的 React 组件，需要的朋友可以参考下
    2022-07-07
  • React-Native 组件之 Modal的使用详解

    React-Native 组件之 Modal的使用详解

    本篇文章主要介绍了React-Native 组件之 Modal的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论