读心悦

弹窗 Modal 基本功能有消息、确认和取消两个。其他的功能暂时放下，需要什么就加什么吧？

useState是 React Hooks 的一部分，允许在函数组件中添加状态。它返回一个包含当前状态和更新状态的函数的数组。状态更新时，React 会重新渲染组件，除非新的状态值与当前状态值完全相同。React 使用 fiber 数据结构来跟踪组件的状态和更新。

在 React 中使用 Ant Design (antd) 封装枚举字典组件可以帮助你更方便地管理和使用枚举值。枚举字典通常用于将数据库中的数字或字符串代码映射为人类可读的标签或描述。

在 React 中使用 Ant Design（antd）封装一个权限按钮通常涉及到两个主要部分：按钮的渲染逻辑和权限的验证。

在React中使用元素可以允许你创建动态和交互式的图形。

在实际应用中，你可能需要处理更复杂的情况，比如权限的动态加载、权限的继承、权限的细分等等。你可能还需要为权限按钮添加更多的交互和反馈，比如当用户尝试访问一个没有权限的按钮时，显示一个提示消息。在上面的例子中，PermissionButton组件接受一个permission属性，该属性指定了按钮所需的权限。权限判断：首先，你需要有一个权限管理系统来存储和检查用户的权限。封装按钮组件：基于用户的权限，你可以封装一个React组件，这个组件会渲染一个antd的按钮，或者根据用户的权限不渲染按钮。

属性type，当在页面中需要反显字典的某一个值是，不需要遍历字典来查找对应的值，把这些操作全部放在组件中来完成，页面只需要调用组件即可。所以需要封装一个组件，只要传入对应的字典数据，即可。这里，我把组件的样式、默认值、字典数据、筛选后的字典和类型暴露出来。那么这个下拉框的选项，就是字典。设置类型属性，是为了方便在页面中直接反显对应的字段，不需要通过遍历字典来反显字段。在开发中，我们经常遇到这样的场景，在表单中，有个下拉框，选择对应的数据。这样做法的缺点就是，在每一个地方，我们都需要这样写，导致重复代码。

那么这个筛选组件，就是默认一些常见的条件，比如明天或者昨天，虽然这个条件，我们可以通过antd的日期控件来实现，但缺点就是操作起来有点麻烦。formItemList是一个数组，数组中有三类元素：1、Tabs元素；使用antd的Tabs组件，其他部分就是Form表单了。作为一个公共的基础组件，将动态的数据作为组件属性。这是筛选组件的效果图。一般使用场景，根据需求快速筛选出符合条件的数据。这样既能保证页面的简洁，又能够保证功能的完整。当前的react的版本为：^18.2.0。这就是筛选组件的思路。

前提：这个想法不是首创的，网友是用threejs和Vue来实现效果的。因为我的技术栈是react，就想试试效果。这是效果图：这效果的星空背景，我设置了一个动效，自己任意调整背景，真如上图所示，这时已经调整为立体空间，里面有这个空间的棱角。用three来实现3D效果，就要了解three的一些特点：1、首先是场景scene，可以把它理解为幕布，类似于投影中的幕布；2、摄像机，就是我们以什么角度来观看这个幕布里面的景色效果；3、渲染器，呈现画面物体的过程。......

图一的效果，使用了antd的Menu组件，根据菜单目录的json来渲染的，当从数据库里读取出数据后，是将数据保存到redux中，或者是mobx，避免在分配页面重新请求数据。在开发后台管理的时候，基本上都会有导航菜单的管理。如果是稍微复杂一点的，还会有权限管理，就是对菜单做权限管理，不同的角色，看到不同的菜单。图一，默认的总菜单，只有超级管理员才能看到所有的菜单；图二是分配菜单的目录，根据用户的角色权限来分配对应的菜单目录。这里使用的redux的两种写法，后续会说明两种写法的。...

代码】React-moveable实现Drag效果。

关于threejs的概要内容，大家自己去官方网站了解哈。这篇只记录如何使用。使用three绘制图形不能缺少的三个要素：1、虚拟场景scene，是一个沙盘，呈现的物体需要摆放到场景中；2、虚拟相机camera，站在摄像机的角度去看场景中的物体；3、渲染器renderer，呈现物体画面的过程。如果是在单独的HTML页面中进行开发的话，就需要独自引入threejs文件：这个threejs文件可以到官网上下载或者是到github上下载也行。如果是使用框架，比如react组件来封装three组件，则是需要安装th

光源作为场景中重要的部分，如果没有光源，那么渲染的场景将不可见【除非使用的是基础材质或者线框材质】光源THREE中有很多不同类型的光源，例如：THREE.AmbientLight，基本光源，该光源的颜色将会叠加到场景现有物体的颜色上THREE.PointLight，点光源，从空间的一点向所有方向发射光线，点光源不能用来创建阴影THREE.SpotLight，聚光源，类似手电筒，这种光源用来投射阴影；THREE.DirectionalLight，无限光，发出光线可以看做是平行的，类似太阳光，这种光源也可以用来

要实现的webIDE主要是为了能够在线编辑服务器上的源码。WEBIDE的效果图如下左边栏是读取的文件目录，当具体的文件的时候，则读取该文件的代码，显示到右边的编辑器中。

首先，不可置疑的就是要安装THREE，这个就不多说了。在React组件中，引入THREE依赖：在useEffect中初始化渲染组件需要返回一个虚拟DOM，用来渲染THREE步骤2：创建立体几何对象，THREE.BoxGeometry是在创建立体矩形，如果想要创建球体几何对象的话，使用THREE.SphereGeometry。步骤4：将几何对象和材质添加到场景中，步骤5：设置相机，步骤6：设置光源关于THREE光源的知识，可以参考：如何使用THREE光源源码效果图：添加一些动画

这篇主要是记录在页面中呈现3D效果的矩形，如下图所示：这个组件的react版本是v18，用的是函数组件，THREE的初始化是在useEffect中执行的：在组件中，首先是引入THREE，react版本v18就不用手动引入react了。在init初始化函数内需要做的事情：源码：......

Modal组件自身带有footer属性，在嵌入form表单时候，是否需要加入表单的buttn按钮呢？如果我们加入form表单内按钮，那么就需要隐藏Modal的footer属性，同时在Modal里面需要调整按钮的样式，来配合Modal。这样在操作表单的时候，只需要在对应的Form.Item设置校验规则，不用另外添加代码，就可以完成校验的工作。另一个就是我们直接使用Modal组件的footer的按钮，不用调整哪些繁琐的样式了，但是操作Modalfooter按钮的时候不能直接校验Form表单，以下是解决该问题的源

文章目录背景HocEcharts组件背景在开发可视化组件的时候，每个组件我们都需要引入echart:import * as echarts from 'echarts';然后就是DOM的初始化：function RadialPolar() { useEffect(() => { const myChart = echarts.init(document.getElementById('main') as HTMLElement); const options = {

Modal组件效果图如下这里的“弹窗子组件”，值得是Modal包裹的子组件内容： <Modal title="弹窗标题" modalShadow='true' visible={visible} onCancel={() => { setVisible(false) console.log("取消") }} onOk={()=>{ alert("点击确认按钮"

今天想封装一个扇形图，表示各类数据的情况。效果如下图：这一类扇形图由几个部分构成：刻度线分类圆心圆心在options对象中的polar属性表示圆心特征。如下代码，其中20表示中间小圆的大小，百分比是表示图形在canvas画布中的比例。polar还可以设置其他的属性，可参考官网。 polar: { radius: [20, '80%'] },分类在圆弧边上的分类，用angleAxis属性来设置：其中type：“category”；data：一

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar

条形图效果如下：根据需求，可以隐藏X、Y轴的刻度线和label内容。其实条形图就是柱状图旋转后的效果，柱状图的X轴设置的是label、Y轴设置为value，那么条形图就是相反，X轴设置设置为value，Y轴设置为label： xAxis: { type: 'value', }, yAxis: { type: "category", data: ["2012", "2013", "2014", "2015", "2016

基于Echarts封装一个柱状图的组件，吧常见的柱状图类型集成到一个组件中，调用组件时，只需要传入对应的type和数据即可。常见的类型：基础柱状图

因为在编辑表格的时候，有可能会涉及到联动计算，就会导致不断刷新表格，每输入一次就失去焦点。会影响正常的编辑操作。所以在表格的每一行单独设置为form表单，编辑的时候，不更新表格数据，而是更新表单数据即可。import React, { useState } from 'react';import { Table, Input, Button, Form, Typography } from 'antd';import { list } from "./data"const EditableCell

最近在修改组件中，遇到了表格编辑，其中涉及到表格行数据编辑联动的交互，例如第一列编辑时，自动计算出第二列的结果。最开始的思路是，在每次编辑的时候，定位到表格的每一行和每一列，然后进行数据更新。但是在整个表格数据更新的时候，当前的Input组件失去焦点。这不是我们想要的交互效果。另一个思路就是，表格的每一行都用表单来控制。编辑的时候，只要更新当前的表单，然后获取表单的所有字段，最后再更新整个表格。import React, { useContext, useState, useEffect } fro

直观表现就是源码：import { useEffect } from "react";import * as echarts from 'echarts';function AreaEchart() { useEffect(() => { const day = ["第1天", "第2天", "第3天", "第4天", "第5天", "第6天", "第7天", "第8天", "第9天", "第10天", "第11天", "第12天", "第13天", "第14天", ".

import React, { Component } from "react";import Chart from "chart.js";class LineChart extends Component { componentDidMount() { const ctx = document.getElementById('canvas').getContext...