最近项目终于要收尾了，项目主要采用团队内部渲染引擎，但借这个机会，我也用json2html-react额外实现了一套相同的业务交互。过程中各种辛酸，喜悦。。。这里暂不矫情了，我们直奔主题，看看在实战的情况下，json2html-react做了哪些。
组件RenderJson props属性的变化【去除了rootState，新加了initialValues】
在实战过程中确实发现rootState很鸡肋，说它没用，它有一定的使用场景；说它有用，它的那些使用场景完全可以靠form来支持完成。另外，对于一个全局注入的rootState，无疑每次更新，都会使得所有子组件全部更新，所以这种低效且鸡肋的东西，我果断去掉了。
新加的initialValues这个主要用于form数据初始化。虽然子组件传入属性defaultValue也支持设置form值。但跟后端交互的过程中，要想很快兼容老的数据结构，这个还是非常必要的。
// 初始化数据
"initialValues": {
"data": {
"mobile": "16621261895",
"name": "test"
}
}
// renderJson
{
"widget": "div",
"dataBind": "data",
"jChildren": [
{
"widget": "input",
"isFormField": true,
"jProps": {
"label": "您的姓名",
"placeholder": "您的姓名"
},
"rules": [
{
"message": "请输入您的姓名",
"required": true
}
],
"dataBind": "name"
},
{
"widget": "input",
"isFormField": true,
"jProps": {
"label": "您的手机号",
"placeholder": "您的手机号"
},
"rules": [
{
"message": "请输入您的手机号",
"required": true
}
],
"dataBind": "mobile"
}
]
}
新功能：
支持表单warning信息的展示。
对于带有isFormField字段的组件，会在组件校验触发时，将未通过的rule规则对应的message提示出来。form组件受控处理。 json2html-react会自动处理form组件的受控逻辑，所以对于所有的form组件，只需要接受{value, onChange}属性即可，如果有特殊逻辑，可以解构出两个值，进行form控制；默认情况下直接传给input组件即可。
import React from 'react';
import { Input } from 'zarm';
import './index.scss';
function CommonInput(props) {
const { preCls, label, ...others } = props;
const tempCls = preCls || 'common-input';
return (
<div className={tempCls}>
{!!label && <span className={`${tempCls}-label`}>{label}</span>}
<Input {...others} />
</div>
);
}
export default CommonInput;
支持path的实现。
正常情况下，我们需要控制的数据应该不止一层。像上面的初始化数据一样，我们可能是需要用data包裹住name和mobile的值然后传给后端。这个时候就用到dataBind属性。它会帮你处理好值的上下级关系，但要注意个小细节，当dataBind存在时，如果期望它作为form的值绑定，需要额外添加属性isFormField，并设置为true；如果仅仅是作为path的实现，则无需添加该属性isFormField。常用组件。
我大致整理了下常用组件，排开业务功能关联的，像阅读协议，验证码等。最常用的貌似就只有一个组件，也是各位最熟悉的组件：div。
import React from 'react';
function Div(props) {
const { children, label, noTag, ...others } = props;
// 有children时，div是个包裹的容器
if (children) {
return (
<div {...others}>{children}</div>
);
}
// 有时我们仅仅想渲染个纯文本
if (noTag) {
return label;
}
// div里面包含一个文本
return (
// eslint-disable-next-line
<div {...others} dangerouslySetInnerHTML={{ __html: label }} />
);
}
export default Div;
-
常用action。
这个也不是很多，抛开基本的页面跳转，页面请求。用得最多的还是弹窗。
import React from 'react';
import ReactDOM from 'react-dom';
import { Popup } from 'zarm';
import { RenderJSON, handleAction, registerAction } from 'json2html-react';
const actionPopup = (data, opt) => {
const {form, parentResult} = opt || {};
const { jChildren, direction, isMaskClose, className } = data;
const ele = document.querySelector('html');
const { body } = document;
const oldEle = document.getElementById('actionPopup');
if (oldEle) {
ReactDOM.unmountComponentAtNode(oldEle);
document.body.removeChild(oldEle);
ele.style.overflow = 'initial';
body.style.overflow = 'initial';
}
ele.style.overflow = 'hidden';
body.style.overflow = 'hidden';
const div = document.createElement('div');
div.id = 'actionPopup';
document.body.appendChild(div);
// 关闭弹层
const onClose = () => {
ReactDOM.unmountComponentAtNode(div);
document.body.removeChild(div);
ele.style.overflow = 'initial';
body.style.overflow = 'initial';
};
registerAction({
onActionPopupOk: () => {
onClose();
},
});
const options = {
renderJson: jChildren,
};
ReactDOM.render(
<Popup
visible
direction={direction}
className={className}
onMaskClick={() => {
if (isMaskClose) {
onClose();
}
}}
>
<RenderJSON {...options} />
</Popup>,
div,
);
};
值得注意的是：这里可以无限制的使用RenderJSON，在任何你想用的地方，json2html-react会自动帮你引入主组件注册的全局component和action，且form也会帮你统一管理好。所以RenderJSON组件只是个渲染。
当然如果有新的action在弹窗内需要实现，也是完全没问题，直接注册即可。
-
支持action修改任意组件的任意属性。
这个很骚，真的骚。我们之前的联动都是基于组件自身来讲的。举个🌰，我现在a组件value发生变化的时候，我希望b组件和c组件的value都同步改变。之前的情形需要在b组件和c组件添加linkage属性，去监控a的变化，并返回新的value。现在可以直接在a组件内直接修改b和c组件的任何属性。使用update action，该action为json2html-react内部注入，无需添加。
{
// data是个数组，所以支持同时修改多种情况，即满足多对多
"data": [
{
// 如果一种value同时适用于多个组件，可使用nameList，里面的name即path值
"nameList": ["data.name", "data.mobile"],
"value": {
"jProps": {
"label": "您的姓名1",
"placeholder": "您的信息将被严格保密"
}
}
},
{
// 如果仅仅修改一个组件，可以用name，name格式也是path值
"name": "data.certNo",
"value": {
"jProps": {
"label": "身份证号1",
"placeholder": "您的信息将被严格保密"
}
}
}
],
"type": "update"
}
-
支持子组件注册action。
我们经常会有种情形，就是兄弟组件之间交互，或者父组件想要控制子组件，尤其是当子组件带有自身state的情况，复杂指数将会飙升【因为每个组件，理论上都可以被展示多次，只要配置就会展示。】当然这一切json2html-react也会一并处理好，你只需要像注册全局action一样，在子组件内注册即可。action名字为了好区分，可以是字符串类型的任何形式：'a.b','a.c.d', '[{a:1}]', 'a-1'等。
到此，json2html-react的第一个实战达成。但最让我引以为荣的除了上面的各种骚操作之外，还得数全局状态的管理。目前大家可以这么理解它，作为一个解析器，json2html-react完全动静分离。就是，你只需要关注页面长啥样子即可，页面各个组件的交互和联动完全不用关心，最大程度的缩小关注点，才能将错误率降到最低，这也将成为后面的html2json的最大铺垫。
简单就好
