json2html-react发布了2.x.x版本，这次调整主要是面向使用者。讲道理，一直以来我以为没多少伙伴使用，但直到昨天【2023年6月20日】我发布的时候，看到周下载量500多，我麻了。
果然，不愧都是程序员，跟我一样，都不善言辞，只搞技术。昨天新版本解决了很多问题，其中最大的问题就是使用问题。这下大家可以直接下载应用于项目了。这边我也说明下里面的一些重点：
一、下载
npm i -S json2html-react
# or
yarn add json2html-react
# or
pnpm i -S json2html-react
二、 使用
import { useEffect } from 'react';
import { RenderJSON, registerAction, registerComponent } from 'json2html-react';
import actions from 'action path';
import components from 'components path';
import data from 'data path';
export default () => {
useEffect(() => {
// 注册actions
registerAction(actions)
// 注册components
registerComponent(components)
}, [])
const options = {
renderJson: data, // 待渲染的数据
}
return (<RenderJSON {...options} />)
}
完了？完了！真的完了！！！加引用，加换行，20行代码搞定一系列页面【不是一个页面，是一系列页面】。RenderJSON内置了form对象，属性可以参考rc-form包的说明文档。所以上面的代码足以应对90%的使用场景。剩下的工作只需要传入不同的data即可。
三、问题
1. 如果存在页面状态如何处理？举个例子：初始化页面我要设置个5s倒计时，data渲染了两套核心页面交互，5s倒计时结束，我要隐藏第二套页面。怎么处理？
处理方式有很多，例如封装成组件；但如果觉得组件太重，没必要，也支持页面组件添加状态。
const [time, setTime] = useState(5);
const options = {
rootState: {time}, // 页面组件状态，将被注入到$globalState用于联动。
renderJson: data, // 待渲染的数据
}
return (<RenderJSON {...options} />)
2. 如果页面需要实时获取表单交互值，并做处理？举个例子：我希望用户每输入一个字符，都发送一个埋点请求。怎么处理？
const [time, setTime] = useState(5);
const options = {
rootState: {time}, // 非必须！页面组件状态，将被注入到$globalState用于联动。
renderJson: data, // 必须！待渲染的数据
events: { //非必须！form组件绑定事件
onChange: (k, v, form) => {
console.log('表单变化的key:', k);
console.log('表单变化的value:', v);
console.log('表单form:', form);
// 发送埋点请求
}
}
}
return (<RenderJSON {...options} />)
如果用完觉得好简单；源码看了，脑海里飘过“就这？”。这便是对我最大的肯定。如果使用有问题，可以第一时间联系我，知无不言。
