背景在开发一个需求时,需要对原来的 form 表单组件代码复用并进行拓展。场景A 使用原来的 form 表单组件。场景B 在原来的表单组件基础上,新增一些表单项,新增表单项位置动态插入在原来的表单组件中,位置随意。需求复用表单组件,同时支持新增表单项。解决方案在 React 中,组件扩展和定制的能力,可以通过props.children和render props来实现。以上两种方式的缺点是:如果插入位置比较分散,需要定义children对象或多个 props,代码繁琐,不易维护。调研下来,目前貌似没其他好的方法...欢迎补充props.childrenprops.children 直接将内容作为一个HTML内嵌结构编写,将组件参数与内嵌结构分开写。children 可以是一个字符串, 数组,对象等类型。可以使用React.Children的方法来判断props.children 类型并处理。function Father() {
return (我是父组件Father我是子组件Form1的children{{
title: (我是子组件Form2的title),
content: (我是子组件Form2的content)
}})
}
function Form1
...
继续阅读
(30)