React + 项目(从基础到实战) -- 第11期

目标

问卷编辑器的开发

设计UI - 拆分布局

水平垂直居中

在这里插入图片描述

画布 y方向滚动

在这里插入图片描述

自定义问卷组件

在这里插入图片描述

后端返回组件数据

 //获取单个问卷信息{url: '/api/question/:id',method: 'get',response: () => {return {errno: 0,data: {id: Random.id(),title: Random.ctitle(),componentList:[//Title{id:Random.id(),type:'questionTitle', //组件类型不能重复,前后端统一title:"标题",props:{text:"问卷标题",level:1,isCenter:false}},//Input{id:Random.id(),type:'questionInput',title:"输入框",props:{title:"输入框",placeholder:"请输入内容",}},//Input2{id:Random.id(),type:'questionInput',title:"输入框2",props:{title:"输入框2",placeholder:"请输入内容2",}}]}}}},

前端 redux 存储后端返回组件数据

切片

import { createSlice , PayloadAction } from "@reduxjs/toolkit";import { ComponentPropsType } from "../../components/QuestionComponents";//单个组件的信息export type ComponentInfoType={fe_id : string,//为什么下划线type : string,title: string,props:ComponentPropsType}//redux存放组件列表//1. 定义数据结构export type ComponentsStateType={componentList:Array<ComponentInfoType>,}//2. 初始化const INIT_STATE:ComponentsStateType={componentList:[],//其他扩展}export const componentsSlice = createSlice({name:"components",initialState:INIT_STATE,reducers:{//重置所有组件//看不懂啊老铁!!!!resetComponentList:(state: ComponentsStateType , action: PayloadAction<ComponentsStateType>)=>{return action.payload}}})//导出所有的actionsexport const {resetComponentList} = componentsSlice.actionsexport default componentsSlice.reducer

store

import { configureStore } from '@reduxjs/toolkit'import userReducer, { UserStateType } from './userReducer'import componentsReducer , {ComponentsStateType}from './componentsReducer'export type StateType={user : UserStateType,components : ComponentsStateType}export default configureStore({reducer: {//分模块注册user: userReducer, // 存储user数据components : componentsReducer// 存储问卷组件列表的数据// 存储问卷组件列表的数据// 存储问卷信息数据}})

发请求时存储数据

import { useEffect , useState } from "react";import { useParams } from "react-router-dom";import { useRequest } from "ahooks";import {useDispatch} from 'react-redux'import {resetComponentList} from '../store/componentsReducer'//导入发起请求的函数import { getQuestinService } from "../services/question";function useLoadQuestionData() {const dispatch = useDispatch()const {id = ''} =useParams()const {data , loading , error , run} = useRequest(async (id : string) => {if(!id) throw new Error('不存在问卷id')const data = await getQuestinService(id)return data},{manual: true,})//根据获取的data 设置redux storeuseEffect(() => {if(!data) returnconst {title ='' , componentList = []} = data//获取到的componentList 存储到 Redux store中dispatch(resetComponentList({componentList}))},[data])//问卷改变时, 重新加载问卷数据useEffect(() => {run(id)},[id])return {loading,error,}}export default useLoadQuestionData;

在这里插入图片描述

页面画布区域显示组件列表

自定义hook获取数据

import { useSelector } from "react-redux";import { StateType } from "../store";import { ComponentsStateType } from "../store/componentsReducer";function useGetComponentInfo() {//使用useSelector获取store中的数据const componens= useSelector<StateType>(state => state.components) as ComponentsStateType//结构出空数组const {componentList = []} = componensreturn {componentList}}export default useGetComponentInfo;

重构canvas页面

import { FC } from 'react';import styles from './EditCanvas.module.scss';//静态展示import useGetComponentInfo from '../../../hooks/useGetComponentInfo';import { ComponentInfoType } from '../../../store/componentsReducer';import { getComponentConfByType } from '../../../components/QuestionComponents';type PropsType={loading : boolean}const EditCanvas: FC<PropsType> = ({loading}) => {const {componentList } = useGetComponentInfo();if(loading){return <div>loading</div>}//根据传入的组件 ,function getComponent(componetInfo : ComponentInfoType){const {type , props} = componetInfo//根据组件类型找到对应的组件配置const componentConf= getComponentConfByType(type)if(!componentConf) return nullconst {Component} = componentConfreturn <Component {...props} />}return (<div className={styles.canvas}>{componentList.map(c => {const {id} = creturn (<div key={id} className={styles['component-warpper']}><div className={styles.component}>{getComponent(c)}</div></div>)})}</div>);};export default EditCanvas;

点击组件选中效果

添加selectedId,点击时,修改当前选中组件id

import { createSlice , PayloadAction } from "@reduxjs/toolkit";import { ComponentPropsType } from "../../components/QuestionComponents";import {produce} from "immer";//单个组件的信息export type ComponentInfoType={// fe_id : string,//为什么是fe_idid: stringtype : string,title: string,props:ComponentPropsType}//redux存放组件列表//1. 定义数据结构export type ComponentsStateType={componentList:Array<ComponentInfoType>,selectedId:string}//2. 初始化const INIT_STATE:ComponentsStateType={selectedId:'',componentList:[],//其他扩展}export const componentsSlice = createSlice({name:"components",initialState:INIT_STATE,reducers:{//1. 重置所有组件//看不懂啊老铁!!!!resetComponentList:(state: ComponentsStateType , action: PayloadAction<ComponentsStateType>)=>{return action.payload},//2.修改选中的组件id//使用immer , 改进state不可变数据的写法changeSelctedId:produce((state: ComponentsStateType , action: PayloadAction<string>)=>{state.selectedId=action.payload})}})//导出所有的actionsexport const {resetComponentList} = componentsSlice.actionsexport default componentsSlice.reducer

页面注册点击事件

 //点击选中组件function handleClick(id: string) {dispatch(changeSelctedId(id))}

点击后改变样式

classsNames css样式的拼接

import classNames from 'classnames'; // 这个是实现css样式的拼接{componentList.map(c => {const {id} = c//拼接classnameconst defaultClassName=styles['component-warpper']const selectedClassName=styles.selectedconst wrapperClassName = classNames({[defaultClassName]: true,[selectedClassName]: id === selectedId})return (<div onClick={()=>{handleClick(id)}} key={id} className={wrapperClassName}><div className={styles.component}>{getComponent(c)}</div></div>)})}

在这里插入图片描述

点击空白处,取消选中效果

注意这里阻止冒泡的操作

在这里插入图片描述

默认初始加载时选择第一个组件

在这里插入图片描述

组件库

组件分组

left 布局搭建
选取组件库中的 tabs组件
又提取出组件 componentlib

在这里插入图片描述

显示到组件库

在这里插入图片描述

点击,添加组件到画布

画布信息需要更新
画布信息存在Redux中

处理redux

在这里插入图片描述

页面中使用

在这里插入图片描述

组件属性面板

组件属性的配置

每个组件的属性不一样,单独配置

import React, {FC, useEffect} from "react";import { QuestionInputPropsType } from "./interface";//引入组件库import {Form ,Input} from "antd";const PropComponent:FC<QuestionInputPropsType> = (props:QuestionInputPropsType) => {const {title , placeholder} = props;return (<div><Formlayout="vertical"initialValues={{ title ,placeholder }}><Form.Item label="标题" name="title" rules={[{ required: true, message: '请输入标题' }]}><Input /></Form.Item><Form.Item label="Placeholder" name="placeholder"><Input/></Form.Item></Form></div>)}export default PropComponent;

画布中点击不同的组件时,监听变化,即时显示在右侧属性栏

在这里插入图片描述

组件配置中引入属性配置

在这里插入图片描述

属性面板显示组件属性

根据selectedID面板显示组件属性

在这里插入图片描述

onchange改变组件属性时,同步到Redux Store

改变组件属性时,统一交给上层的componentProops管理

在这里插入图片描述

在redux store 中增加修改属性的方法

在这里插入图片描述

头部编辑栏

定义组件
页面中引入

import React , {FC} from "react";import styles from "./EditHeader.module.scss";import {Button,Space,Typography,}from 'antd';import { LeftOutlined } from "@ant-design/icons";import { useNavigate } from "react-router-dom";const {Title} = Typography;const EditHeader:FC = ()=>{const nav = useNavigate()return (<div className={styles['header-wrapper']}><div className={styles.header}><div className={styles.left}><Space><Button type="link" icon={<LeftOutlined></LeftOutlined>} onClick={()=>nav(-1)}>返回</Button><Title>问卷标题</Title></Space></div><div className={styles.main}>中</div><div className={styles.right}><Space><Button>保存</Button><Button>发布</Button></Space></div></div></div>)}export default EditHeader;