研究半天搞清楚如何根据json配置来生成页面，有了这个积木就好搭了，这个代码很简单，可以很好的理解核心。
参考的文档
//https://zhuanlan.zhihu.com/p/100708653
//https://baidu.github.io/amis/zh-CN/docs/start/getting-started
下面这个例子，首先是构造一个页面布局的对象，实际生产就可以使用json串解析获得，然后递归通过createelement生成组件，最后渲染到页面上。
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Col, Row } from 'antd';
import Video from "./VideoStory"
import Photo from "./PhotoStory"
const root = ReactDOM.createRoot(document.getElementById('root'));
var col11=createComponent("Col",{span:12},[createComponent("Video")]);
var col12=createComponent("Col",{span:12},[createComponent("Photo")]);
var row1=createComponent("Row",null,[col11,col12]);
var col21=createComponent("Col",{span:24},[createComponent("Photo")]);
var row2=createComponent("Row",null,[col21]);
function mapCodeToComponet(code){
switch(code){
case "Col":return Col;
case "Row":return Row;
case "Video": return Video;
case "Photo": return Photo;
default : return code;
}
}
function createComponent(name,props,children){
var info={};
info.type=name;
info.propertis=props;
info.children=children;
return info;
}
var uniqueKey=0;
function createTree(rootNode){
var children=[];
if(rootNode.children){
for (const item of rootNode.children) {
children.push(createTree(item))
}
}
rootNode.propertis={…{key:"key" uniqueKey },…rootNode.propertis};
return React.createElement(mapCodeToComponet(rootNode.type),rootNode.propertis,children);
}
var rootElement=createTree(createComponent("div",null,[row1,row2]));
root.render(rootElement);
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。