react 实现插槽slot功能

背景

在开发一个需求时,需要对原来的 form 表单组件代码复用并进行拓展。

场景A 使用原来的 form 表单组件。

场景B 在原来的表单组件基础上,新增一些表单项,新增表单项位置动态插入在原来的表单组件中,位置随意。

需求

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

解决方案

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

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

props.children

props.children 直接将内容作为一个HTML内嵌结构编写,将组件参数与内嵌结构分开写。

children 可以是一个字符串, 数组,对象等类型。可以使用 React.Children 的方法来判断props.children 类型并处理。

javascript 复制代码
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。

javascript 复制代码
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 值使用。

javascript 复制代码
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>
  )

行业拓展

分享一个面向研发人群使用的前后端分离的低代码软件------JNPF,适配国产化,支持主流数据库和操作系统。

提供五十几种高频预制组件,包括表格、图表、列表、容器、表单等,内置常用的后台管理系统使用场景和基本需求,配置了流程引擎、表单引擎、报表引擎、图表引擎、接口引擎、门户引擎、组织用户引擎等可视化功能引擎,超过数百种功能控件以及大量实用模板,使得在拖拉拽的简单操作下,也能完成开发。

对于工程师来说,灵活的使用高质量预制组件可以极大的节省时间,将更多精力花费在更有创造性和建设性的代码上。

相关推荐
1024小神11 分钟前
next项目使用状态管理zustand说明
前端
Asort11 分钟前
JavaScript设计模式(八):组合模式(Composite)——构建灵活可扩展的树形对象结构
前端·javascript·设计模式
刘永胜是我13 分钟前
【iTerm2 实用技巧】解决两大顽疾:历史记录看不全 & 鼠标滚轮失灵
前端·iterm
returnfalse15 分钟前
🔥 解密StreamParser:让数据流解析变得如此优雅!
前端
凉城a16 分钟前
经常看到的IPv4、IPv6到底是什么?
前端·后端·tcp/ip
jserTang22 分钟前
Cursor Plan Mode:AI 终于知道先想后做了
前端·后端·cursor
木觞清27 分钟前
喜马拉雅音频链接逆向实战
开发语言·前端·javascript
一枚前端小能手30 分钟前
「周更第6期」实用JS库推荐:InversifyJS
前端·javascript
Hilaku32 分钟前
"事件委托"这个老古董,在现代React/Vue里还有用武之地吗?
前端·javascript·vue.js
前端缘梦37 分钟前
Webpack 5 核心升级指南:从配置优化到性能提升的完整实践
前端·面试·webpack