使用React将JSON 渲染为组件
实现思路
要将JSON Schema渲染为React组件,我们可以按照以下步骤进行实现:
-
得到JSON .
-
构建自定义组件 。
-
嵌套渲染功能实现 。
示例代码
typescript
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)
)
}