代码拉取完成,页面将自动刷新
基于React组件之间原始约束设计,还原真实开发中组件编码过程,所见即所得。当前版本还在开发中,新功能持续更新.....欢迎关注!
yarn add @brickd/react @brickd/react-web @brickd/render
OR
npm install @brickd/react @brickd/react-web @brickd/render
import { createElement } from 'react';
import { BrickDesign, BrickTree, BrickProvider, useSelector, createActions,PROPS_TYPES } from '@brickd/react';
import { BrickPreview } from '@brickd/react-web';
import BrickRender from '@brickd/render';
import * as Ants from 'antd/es';
const divSchema = {
propsConfig:{
children:{
label: '文本内容',
type: PROPS_TYPES.string,
},
...
}
}
const componentSchemasMap = {
'div':divSchema,
...
}
const config = {
componentsMap:Ants,
componentSchemasMap
}
const plugins = [(vDom, componentSchema) => vDom];
const customReducer = (state, action) => {
const { type, payload } = action
switch (type) {
case 'customReducer':
return { ...state }
default:
return state
}
}
const App = () => {
const { pageConfig } = useSelector(['pageConfig'])
return (<BrickProvider initState={{...}} customReducer={customReducer} config={config} warn={(msg) =>console.warning(msg)}
>
<div onClick={() => createActions({ type: "customReducer", payload: { ... } })}> 出发action</div>
<BrickPreview />
<BrickDesign />
<BrickRender pageConfig={pageConfig} createElement={createElement} plugins={plugins} />
<BrickTree />
</BrickProvider>);
}
yarn install
npm run start:example
画布
组件树
渲染器
代码生成器
如果你觉得这个项目对你有用或者有所启发,可以请作者喝杯咖啡提提神持续更新:
微信捐赠 | 支付宝捐赠 |
---|---|
MIT
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。