使用React将JSON 渲染为组件

实现思路

要将JSON Schema渲染为React组件，我们可以按照以下步骤进行实现：

1. 得到JSON .

2. 构建自定义组件 。

3. 嵌套渲染功能实现 。

示例代码

import React, { useState, useEffect } from "react";interface Schema {type: string;title?: string;content?: string;props?: object;children?: Schema[];
}
interface CardSchema extends Schema {title: string;content: string;
}
// 卡片组件
function Card({ schema }: { schema: CardSchema }) {return (<div className="card"><h2>{schema.title}</h2><p>{schema.content}</p></div>);
}
// 容器组件,支持嵌套
function Container({ schema, renderSchema }: { schema: Schema, renderSchema: (schema: Schema) => JSX.Element }) {return (<div className="container">{schema?.children?.map(renderSchema)}</div>);
}
// 原生组件
function DynamicElement({ schema, renderSchema }: { schema: Schema, renderSchema: (schema: Schema) => JSX.Element }) {const children = schema?.children?.map(renderSchema)const type = schema.type;const props = schema.props;if (type === 'input') {return <input {...props} />} else {return React.createElement(type, props, children);}
}
//渲染核心组件
function renderSchema(schema: Schema): JSX.Element {switch (schema.type) {case 'card':return <Card schema={schema as CardSchema} />;case 'container':return <Container schema={schema} renderSchema={renderSchema} />;default:return <DynamicElement schema={schema} renderSchema={renderSchema} />;}
}const schemaTmp = { type: 'container', children: [{ type: 'card', title: '标题', content: '内容' }, { type: 'card', title: '标题', content: '内容' }, { type: 'card', title: '标题', content: '内容' }, { type: 'div', props: {}, children: [{ type: 'input', props: { value: '111' }, children: [] }] }] }export default function Home() {return (renderSchema(schemaTmp))
}