泉州企业建站程序,网站怎么开发设计,连云港网站优化方案,电子商务的一般流程摘要
在上一篇文章中的末尾#xff0c;我们也完成了Input组件的属性面板配置。现在我们的低代码项目已经小有成就了。但是后面的内容还是不少的。
如果你是第一次看到这篇文章#xff0c;那么请移步到第一节#xff1a; 从零实现一套低代码#xff08;保姆级教程#xf…摘要
在上一篇文章中的末尾我们也完成了Input组件的属性面板配置。现在我们的低代码项目已经小有成就了。但是后面的内容还是不少的。
如果你是第一次看到这篇文章那么请移步到第一节 从零实现一套低代码保姆级教程 — 【1】初始化项目实现左侧组件列表 来到本系列的第六节我们回顾一下之前的实现内容。 1. 当我从左侧拖拽组件到画布区时是怎么实现组件交互的 2. 当我选中画布区的组件时右侧属性面板是怎么展示的 3. 未来我们可能通过点击层级树选中节点要怎么做 4. 未来我们可能会在全局放置一个模型要怎么做等等等
前两点我们目前是通过window来实现组件的信息传递的。那既然有很多地方用所以我们需要有一个全局的状态管理管理组件的信息。
所以这时候我们就要引入redux了用redux我们可以统一管理组件相关的信息。这样就不需要在我们的leftPart和rightPart或者mainPart中处理组件的存储管理了。
我们开始 1.引入redux
OK现在我们进行引入redux这里我们使用的是reduxjs/toolkit所以在控制台输入 npm install --save reduxjs/toolkit安装完成后在pages同级目录下新建一个store文件夹 在index.ts中我们写一下redux的初始化逻辑。
import { configureStore } from reduxjs/toolkitconst initialState { comList: [], dragCom: void 0 }const comReducer (state: any initialState, action: any) {}export default configureStore({ reducer: comReducer,middleware:getDefaultMiddleware getDefaultMiddleware({//关闭redux序列化检测serializableCheck:false})
});在这里我们用暂时先用两个state一个是comList用来表示当前画布区的组件列表。一个是nowCom用来表示从左侧拖拽组件的type就是从左侧组件列表拖拽的组件。
那如果我们将组件的信息保存在redux中当redux里面的内容发生改变时在使用redux的地方就需要更新所以我们封装一个自定义HOOK作为当redux数据发生改变时更新对应的组件。
在store中新建一个subscribe文件
import { useState, useEffect } from react
import Store from ./indexfunction subscribeHook() {// eslint-disable-next-line react-hooks/rules-of-hooksconst [update, setUpdate] useStateany({})// eslint-disable-next-line react-hooks/rules-of-hooksuseEffect(() {Store.subscribe(() {setUpdate({...update})})}, [])
}export {subscribeHook
}补充一句目前我们要引入redux就是要将我们之前的window上挂载的东西全部干掉
2.修改左侧组件到画布区
之前我们从左侧组件列表拖拽组件的时候在onDragStart方法里在window上挂载了一个nowCom属性。现在我们不在window上挂载了直接修改Store中的dragCom。
import Store from ../../../store;const onDragStart (name: string) {return () {// 更新当前拖拽的节点Store.dispatch({type: changeNowCom, value: name});}}那我们之前是在什么地方引用的window.nowCom呢是在mainPart中现在我们改为从Store中拿同时将更新组件的subscribe方法引入。
import Store from ../../../store/index
import { subscribeHook } from ../../../store/subscribeexport default function MainCom() {const [comList, setComList] useStateComJson []([])const [dragCom, setDragCom] useStateComJson | null(null)const [selectId, setSelectId] useStatestring()// 拿到当前拖拽的节点类型const nowCom Store.getState().dragComsubscribeHook()const onDrop (e: any) {// 其他代码}else{style {position: absolute,left: distance.current.endLeft px,top: distance.current.endTop px,zIndex:100}let comId comId_${Date.now()}const comNode {// 不从window上拿直接从store中取comType: nowCom,style,comId}comList.push(comNode)window.renderCom comNode;window.comList comList;window.setComList setComListsetSelectId(comId)}setComList([...comList])}切记subscribe方法是一定要记得引入不然无法让画布区组件更新。
现在我们从左侧拖拽组件也保持正常了。
3.修改画布区中组件拖拽
在mainPart中我们也不需要使用自己的state去管理comList了直接从Store中拿就行了。 const comList JSON.parse(JSON.stringify(Store.getState().comList))记得之前我们在画布区拖拽组件调整位置的时候是通过dragCom来保存当前节点的信息。现在我们只需要记录一个comId然后去comList中找即可。 const [dragComId, setDragComId] useStatestring()const onDragStart (com: ComJson) {return (e: any) {// 设置当前拖拽节点的comIdsetDragComId(com.comId);distance.current.startLeft e.clientX;distance.current.startTop e.clientY;}}在拖拽结束时我们可以去comList中找到对应的节点然后修改它的style。最后通过Store.dispatch去更新画布区。 const onDrop (e: any) {// 只需要判断是否有dragComIdif(dragComId) {const node comList.find((item:ComJson) item.comId dragComId)node.style {...node.style,left: parseInt(node.style.left) (e.clientX - (distance.current.startLeft || 0)) px,top: parseInt(node.style.top) (e.clientY - (distance.current.startTop || 0)) px}// 切记拖拽完组件要记得清空这个idsetDragComId()}else{// 其他代码}// 更新Store从而更新画布区Store.dispatch({type: changeComList, value: comList})}因为这一篇章修改的会比较多最好可以对比着github的提交记录来看因为上面有着改动记录。
在说右侧属性面板之前我先画一个图来表示上面的逻辑让读者更加清晰一点。 4.右侧属性面板的显示
之前我们是通过window上的renderCom以及将setComList挂载在window上和右侧属性面板进行通信现在不用了。我们直接从Store中取。
首先在Store中我们新增一个变量用于存储选中的节点就是右侧属性面板对应的组件ID。
const initialState { comList: [], dragCom: , selectCom: }const comReducer (state: any initialState, action: any) {switch (action.type) {case changeNowCom: {return {...state, dragCom: action.value}}case changeComList: {return {...state, comList: action.value}}// 增加selectCom用来表示选中的节点case changeSelectCom: {return {...state, selectCom: action.value}}default: {return state}}
}在mainPart中当我拖拽组件结束时或者点击组件的时候就要更新选中的节点。 const onDrop (e: any) {distance.current.endLeft e.clientX;distance.current.endTop e.clientY;let style: any;if(dragComId) {// 其他代码setDragComId()// 更改当前选中的节点IDStore.dispatch({type: changeSelectCom, value: dragComId});}else{// 其他代码setSelectId(comId)// 更改当前选中的节点IDStore.dispatch({type: changeSelectCom, value: comId})}Store.dispatch({type: changeComList, value: comList})}const selectCom (com: ComJson) {return () {setSelectId(com.comId);// 更新当前选中的节点Store.dispatch({type: changeSelectCom, value: com.comId});}}现在我们来到右侧属性面板我们也不需要update这个变量了我们从Store中拿到comList和selectCom这样我们就知道要渲染什么类型的组件属性了。
我们修改一下getAttributePanel方法
import Store from ../../../store/index
import { subscribeHook } from ../../../store/subscribeconst comList JSON.parse(JSON.stringify(Store.getState().comList))const selectCom Store.getState().selectComconst selectNode comList.find((item: any) item.comId selectCom)subscribeHook()const getAttributePanel () {// 不从window上拿了。直接从store中取。const comType selectNode?.comType;const comAttributeList attributeMap[comType] || []return div{comAttributeList.map((item,index) {return div key{index} classNameattributeItemlabel classNameattributeLabel{item.label}/labeldiv classNameattributeItemValueInputComponent {...item} onChange{changeComAttribute(item.value)}//div/div})}/div}这里面有一个问题是什么呢因为根据组件ID找到对应组件的方法比较常用不能每次都取comList遍历结果。所以我们后面会封装一个方法专门用来处理根据ID找对应节点的情况。
现在当你拖拽组件或者点击组件的时候右侧属性面板就可以直接显示了。不需要像之前那样还要切换tab页签。
5.修改属性到组件渲染
现在我们就差最后一步了就是在右侧属性面板中修改组件属性然后映射到组件上了。
之前我们是通过window上的setComList修改组件现在呢我们要通过Store的dispatch方法去修改组件的属性 const changeComAttribute (value: string) {return (e: any) {let attribute e;if(typeof e object) {attribute e.target.value;}// 通过Store的dispatch更改组件属性selectNode[value] attribute;Store.dispatch({type: changeComList, value:comList})}}现在你就可以更改组件属性来尝试了组件会正常根据属性的配置进行渲染。
但是呢有一个问题当我给第一个组件配置好属性后选中第二个组件。你会发现右侧的属性面板还是之前的配置。这是为甚呢
因为我们在实现右侧属性面板的时候并没有做回显的功能那属性面板应该怎么回显呢 应该根据当前组件的属性去回显。OK现在我们实现一下 首先给InputComponent组件将当前节点传递过去 const getAttributePanel () {// 其他代码// selectNode当做节点穿过去InputComponent selectNode{selectNode} {...item} onChange{changeComAttribute(item.value)}//div/div})}/div}来到InputComponent组件里面我们修改一下组件的默认值 const { onChange, type, defaultValue, options, selectNode, value } propsconst getComponent () {switch (type) {case input: {// value为组件的默认值return Input value{selectNode[value] || } style{{width:120px}} defaultValue{defaultValue} onChange {onChange}/}case switch: {return Switch value{selectNode[value] || false} defaultValue{defaultValue} onChange {onChange}/}case select: {return Select value{selectNode[value] || defaultValue} style{{width:120px}} options{options} defaultValue{defaultValue} onChange{onChange}/Select}}}到这里我们就实现了redux的引入整个项目的组件我们就使用redux进行管理了。 现在检查一下你的代码是否还有window如果有请删掉如果删掉不好使那一定是哪里漏了。
因为改动比较大引入了redux之后删了不少之前的代码所以建议读者还是照着github的提交记录来看。 本章内容会提交在github上 https://github.com/TeacherXin/XinBuilder2 commit: 第六节在项目中使用redux状态管理
如果可以的话可以给博主的GitHub点亮一颗小星星(╹▽╹)
