The main function is to render JSON into a page, including page action and linkage between components.
npm install json2html-react在此，我们怀着万分遗憾与诚挚的歉意告知大家，由于我们团队经过深入探索与研发，现已推出了更具创新性和卓越性能的替代方案，故而决定对 json2html-react 库停止更新维护。
我们深知，json2html-react 库在过去的日子里承蒙众多用户的信任与选用，为大家在项目开发过程中贡献了一份力量，对此我们深表感激。然而，技术的发展日新月异，为了能给大家带来更优质、高效且便捷的开发体验，我们不得不做出这一艰难的决定。
但请大家放心，我们为此次的改变精心筹备了全新的方案，它将为大家开启全新的开发视野，带来诸多令人惊喜的特性：
> 一、真正的零编程体验
新方案实现了前所未有的突破，无需您编写繁杂的代码，即可轻松完成页面的创建与布局。无论您是经验丰富的开发者，还是刚刚入门的新手，都能在零编程的环境下快速实现自己心中理想的页面效果，大大节省了开发时间与精力，让您将更多的心思聚焦在业务逻辑与创意构思上。
> 二、高度的灵活性与可定制性
尽管无需编程，但新方案绝未牺牲灵活性与定制性。它提供了丰富多样的预设模板与组件，您可以根据具体项目需求，轻松对页面的各个元素进行个性化调整与定制。从页面风格、布局结构到元素样式，一切皆可按照您的意愿随心变换，确保您打造出独一无二且贴合项目需求的完美页面。
> 三、卓越的性能与兼容性
在追求便捷的同时，新方案在性能与兼容性方面也表现卓越。它经过了严格的测试与优化，能够在各种主流浏览器与设备上稳定运行，确保您的页面无论在何种环境下都能流畅展示，为用户提供优质的浏览体验。同时，其高效的渲染机制能够快速处理大量数据，即使面对复杂的页面结构与丰富的内容，也能轻松应对，毫无压力。
我们诚挚地邀请各位用户前往我们的官方网站，亲身体验新方案所带来的这些令人惊叹的特性，一同见证零编程实现页面奇迹的精彩瞬间。
再次为给大家带来的不便深表歉意，我们衷心希望大家能够理解我们的决定，并期待新方案能为您的项目开发带来更多的便利与惊喜。
感谢大家一直以来对我们的支持与厚爱！
---- 小火球
1. 下载json2html-react：
``bash`
npm i -S json2html-reactor
yarn add json2html-reactor
pnpm i -S json2html-react
2. 引用：
`bash
import { useState, useEffect } from 'react';
import components from '../utils/components'
import actions from '../utils/actions'
import { RenderJSON, registerAction, registerComponent } from 'json2html-react';
import data from '../examples/mock.json'
export default function DynamicLinkage() {
const [renderData, setRenderData] = useState(null);
// 注册页面定制化的action
useEffect(() => {
registerAction({
onSubmit: async (d, {form}) => {
console.log('json数据：', d);
try {
const values = await form.validateFields();
console.log(values);
} catch (errorList) {
errorList.forEach(({ name, errors }) => {
// Do something...
});
}
},
});
}, []);
useEffect(() => {
// 注册通用actions
registerAction(actions)
// 注册通用components
registerComponent(components)
}, [])
useEffect(() => {
// json数据由后端保存，这边用timeout模拟请求数据
const timer = setTimeout(() => {
setRenderData(data)
}, 100)
return () => {
clearTimeout(timer)
}
}, [])
if (!renderData) {
return null;
}
const options = {
initialValues: {}, // 非必须！初始化form值。
renderJson: renderData, // 必须！待渲染的json数据
css: '', 非必须！主要用于全局css样式的引入，可以添加class/id等。
events: { //非必须！form组件绑定事件
onChange: (v, opt) => {
const {form, pathName} = opt || {};
console.log('表单变化的key:', pathName);
console.log('表单变化的value:', v);
console.log('表单form:', form);
console.log('通过form获取值', form.getFieldValue(pathName));
}
}
}
return (
}
`json数据结构字段说明：
`bash`
{
// 常规属性
widget: String, // 用于作组件映射
jChildren: Array | Object, // 用于渲染子组件
jProps: Object, // 子组件属性透传
action: Array | Object, // 用于给组件绑定onClick事件
{
type: String, // 用于action映射
data: Any, // 作为传入action数据
}
// 表单属性
dataBind: String, // 当前组件对应的form key值，也是path的一部分。
isFormField: Boolean // 为true时，表示当前组件为表单组件
rules: Array, // 表单规则
linkage: String, // 联动脚本，返回Object会以属性方式传入子组件；返回空则隐藏子组件。
validateTrigger： String, // 当前组件校验时机，onChange | onBlur 等，默认onBlur，即失焦时候校验。
}
目前所有关于表单form的内容，json2html都已处理好了。会将form对象暴露给events和action。具体form属性了解，可参考rc-field-form
推荐关注公众号："小火球烧屁股"。
嫌烦？不要紧。直接上链接：
bash
git clone https://github.com/alan1111/json2html-react.git
`2. 安装依赖：
bash
npm i
`3. 启动应用：
bash
npm run dev
or
yarn dev
or
pnpm dev
``4. 访问http://location:3000即可。