背景
在开发一个需求时，需要对原来的 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> )
复制代码
行业拓展
分享一个面向研发人群使用的前后端分离的低代码软件——JNPF，适配国产化，支持主流数据库和操作系统。
提供五十几种高频预制组件，包括表格、图表、列表、容器、表单等，内置常用的后台管理系统使用场景和基本需求，配置了流程引擎、表单引擎、报表引擎、图表引擎、接口引擎、门户引擎、组织用户引擎等可视化功能引擎，超过数百种功能控件以及大量实用模板，使得在拖拉拽的简单操作下，也能完成开发。
对于工程师来说，灵活的使用高质量预制组件可以极大的节省时间，将更多精力花费在更有创造性和建设性的代码上。
评论