react

可以少去理解一些不必要的概念，而多去思考为什么会有这样的东西，它解决了什么问题，或者它的运行机制是什么？ 一. 环境搭建 工作编辑器：Visual Studio Code。 Javascript 解析器、运行环境 Node.js 的安装。 npm 安装：npm 是 Node.js 的软件包管理器。 ......

使用interval标记和theta坐标系来绘制饼图 radius：标签相对于饼图圆心的距离 .label()中的text 指定了一个回调函数，可以设置标签，其中d是当前项数据，i是当前项的索引，data是全部的数据，注意回调函数要有返回值。 实现效果： import { Chart } from ......

一、受控表单绑定 概念：使用react组件的状态（useState）控制表单的状态。双向绑定，数据变化视图也变，视图变数据也变。 import { useState } from 'react' function App() { const [content, setContent] = useSt ......

1.1 配置环境 React中文文档 React官网文档 安装Nodejs Nodejs官网 安装create-react-app 终端执行： npm i -g create-react-app 安装VSCode插件 Simple React Snippets Prettier - Code for ......

可以少去理解一些不必要的概念，而多去思考为什么会有这样的东西，它解决了什么问题，或者它的运行机制是什么？ React 1. React 起源和发展（是什么？） React 是用于构建用户界面的 JavaScript 库，起源于 Facebook 的内部项目，该公司对市场上所有 JavaScript ......

React.Children.only expected to receive a single React element child. Error: React.Children.only expected to receive a single React element child. at ......

提升state?what?how?why? 兄弟组件之间怎么共享state? onClick='fn()'会立即调用，传参使用onClick='() => fn(id)' 提前返回一些东西 ()的意义 state不应在组件中改变 state三部曲：1.定义它 2.使用它 3.更新它 类似vue中的s ......

最近做的几个项目经常遇到这样的需求，要在表格上增加一个自定义表格字段设置的功能。就是用户可以自己控制那些列需要展示。在几个项目里都实现了一遍，每个项目的需求又都有点儿不一样，迭代了很多版，所以抽时间把这个功能封装了个组件：@silverage/table-custom，将这些差别都集成了进去，方便今... ......

React.Children用很多用法，如下图，经常会用到的是toArray()，具体用法可以自行了解，这里记录下map()的用法和使用到的场景。 1. 用法：React.Children.map接收2个参数，第一个是所有子元素，第二个是个回调，可以对每个子元素进行处理，然后返回处理后的子元素。 2 ......

安装 yarn add react-draggable 使用 import Draggable from 'react-draggable'; export default function TableModal() { const [bounds, setBounds] = useState({ ......

首先我们看下我们有时候需要在官网或者列表中给元素添加一个动画使元素能够平滑的出现在我们的视野中。 如上图所示，我们在vue中可以自定义指令，当我们需要的时候可以直接使用。废话不多说直接上代码。 首先我们创建一个vSlideIn.ts文件 import { DirectiveBinding } fro ......

功能 支持居中/局左/居右布局 可自定义线条颜色 默认情况下图标是圆形，可自定义圆形颜色和大小，同时也可以自定义图标 支持自定义内容 效果 const data=[ { "title": "2022-12-05 12:03:40", "des": "茶陵县实时广播防火宣传" }, ... ] <Ti ......

代码仓库 码云仓库 前期准备 前端项目 后端接口（OpenAI接口即可） 启动一个新的 React 项目 如果小伙伴们有现有项目，可跳过此步骤直接进入下一步~ Next.js 是一个全栈式的 React 框架。它用途广泛，可以让你创建任意规模的 React 应用——可以是静态博客，也可以是复杂的动态 ......

1.父组件向子组件通信 import { useState } from 'react'; function Button(props){ return( <div>{props.name}</div> ) } function App() { const msg=useState('神雕侠侣') ......

本文将为大家总结下DevExtreme在v23.1版本中发布的一些与图表和仪表盘相关的功能。 DevExtreme拥有高性能的HTML5 / JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NET Core，jQuery，Knockout等）构 ......

修改reactd项目的less文件后热更新报错 FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory 解决办法 全局安装插件"increase-memory-limit",用来增加运行内存 ......

安装： npx expo install expo-speech 引入使用： import * as React from 'react'; import { View, StyleSheet, Button } from 'react-native'; import * as Speech fro ......

react菜单Menu导航栏实现 //定义选中的下标 const [currentIndex, setCurrentIndex] = useState(initIndex) //选中样式改变(tailwind) const getCurClass = (index) => { return curr ......

有时候你希望两个组件的状态始终同步更改。要实现这一点，可以将相关状态从这两个组件上移除，并把这些状态移到最近的父级组件，然后通过 props 将状态传递给这两个组件。 这被称为“状态提升”，这是编写 React 代码时常做的事。 事件一般以onXXX开头，比如内置元素div的click事件可以叫on ......

1.订阅发布模式进行兄弟组件通信的案例 1.构建一个调度中心 var bus = { list: [], //订阅 subscribe(callback) { this.list.push(callback) console.log(this.list) }, //发布 publish(name, ......

1.订阅发布模式的定义 订阅发布模式简单来说就是订阅者进行订阅，发布者进行发布，发布者发布时会通过调度中心通知到每一个订阅者。订阅者根据发布的内容选择是否进行对应的操作。 2.实现一个最简单的订阅发布 订阅发布模式的核心就是调度中心。一个最简单的调度中心里面应该具有三个要素 订阅方法，发布方法，回调 ......

1.状态提升(中间人模式)的定义 React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件 上.在父组件上改变这个状态然后通过props分发给子组件。 2.状态提升的使用 简单讲解一下下面的代码，下面模拟了一个电影列表和详情页面。 进行通信的是列表的item和详情组件。 可 ......

在React中子组件给父组件传参通过回调函数来进行。 父组件给子组件传递一个回调函数作为属性。 子组件在需要传递参数的地方调用父组件传递的回调函数即可。 import React, { Component } from 'react' class Navbar extends Component { ......

首先解释React前后端同构、React首屏渲染的概念。然后通过这2个概念解决服务端渲染完成后浏览器端重复渲染的问题。更多技术干货详见www.linuxprobe.com ......

在有些网络环境中，端口是一种比较稀缺的资源，而我们又恰好有多个前端项目需要发布，我们可以采取将多个项目映射到同一个端口上面的方案加以解决。 本教程前端项目主要以react为主，部署在linux服务器上。 1. 将项目资源的访问地址修改为相对方式 在react项目package.json中，添加或者修 ......

import AMapLoader from '@amap/amap-jsapi-loader'; export default class AMaps { options: any; //初始参数 instance: any; //实例 geocoder: any; //地理编码 placeSea ......

ps：以前有写过类似的随笔，今天再次做个总结。 1.安装node.js 去node官网下载吧，这里不赘叙了； 2.安装脚手架create-react-native-app npm i -g create-react-native-app 这个安装过程有快有慢，看运气，我的是几秒就完成了； 3.使用脚 ......

function A() { return (<> This is A component </>) } function B() { let msg = useContext(MsgContext); return (<> This is B component:::: {msg} </>) } ......

代码案例 function A({ onGetAName }) { const name = `> ${new Date().getTime()} <`; return ( <div> This is A component ! {/*箭头函数形式来调用事件函数*/} <button onClick ......

1.受控组件的定义 React组件的数据渲染是否被调用者传递的 props 完全控制，完全控制则为受控组件，否则非受控组件。即React 的 state 成为组件的唯一数据源。 下面用一个小案例来演示，案例中todolist组件的唯一数据源就是State，todolist组件就是一个受控组件 imp ......