搜索结果
查询Tags标签: react,共有 922条记录-
.NET Core + React Antd Pro脚手架
朋友有个小项目的需求,想要用.NET Core 做后端, 前端使用React Antd Pro,比较正常的前后端分离项目需求。 研究了一下发现dotnet 项目模板里面自带react框架,是可以直接使用的。 PS:非服务端渲染,这里只是使用了Statis File中间件发布了前端页面。 框架依赖dotnet c…
2022/4/12 23:16:01 人评论 次浏览 -
React useContext + useReducer 实现 Hooks 状态管理功能
App.tsximport { useReducer } from "react"; import { BrowserRouter, Switch } from react-router-dom; import { renderRoutes } from "react-router-config"; import routes from "./router"; import { IUser, IReducerAction } from @…
2022/4/11 23:15:31 人评论 次浏览 -
深入React源码解读ReactElement到底做了什么
一、前言 本篇主要基于源码谈谈jsx被编译之后,react在创建react element时做了什么 关于jsx的基础知识可以看看另一篇博客由浅入深理解jsx 二、关于CreateElement jsx被babel等编译工具转换之后,实质上是React.createElement方法。在react/packages/react/src/React.js文件…
2022/4/11 20:42:35 人评论 次浏览 -
搭建 React 17 源码本地调试环境
同步链接: https://www.shanejix.com/posts/搭建 React 17 源码本地调试环境/通过这种方式只能调试编译之后的代码,不能实现原汁原味的源代码调试体验。查阅一些社区的实现,记录下步骤,方便后续查阅。 也可以直接 clone 配置好的仓库:https://github.com/shanejix/rea…
2022/4/11 20:12:25 人评论 次浏览 -
Ant Design Form表单提交时校验失败无法自动滚动目标字段
Ant Design Form组件 问题: Ant Design Form表单提交时校验失败无法自动滚动目标字段 方案: Form.useForm().scrollToField() 具体实现: const onFinish = async () => {try {await form.validateFields() // 触发表单验证 // 具体业务逻辑} catch (error) {console.…
2022/4/10 8:12:43 人评论 次浏览 -
react--todolist
1 import React, { createRef, Fragment } from "react";2 3 export default class Todolist extends React.Component {4 constructor() {5 super();6 this.state = {7 obj: [8 { title: "吃饭" },9 { title: "…
2022/4/8 23:26:23 人评论 次浏览 -
TodoList-React
src文件 1.入口文件(index.js) import React from react;//主要环境库es6 import ReactDOM from react-dom;//渲染dom环境 import Todo from ./Todo//引入组件 //渲染的dom ReactDOM.render(<Todo></Todo>,document.getElementById(root) );2.多级传递数据(co…
2022/4/8 23:19:56 人评论 次浏览 -
快速构建Web应用,从零学习React后台项目模版
想要快速构建实际应用,离不开一个好的应用模版,React作为大厂出品工具,有着稳定性和可维护性的保障,同时可以使用相关的全套全家桶(React + React-router + Axios + Mobx + Antd)进行连贯敏捷开发,本文将从如何在云开发平台创建项目应用模版,基于应用模版创建《后…
2022/4/3 8:19:34 人评论 次浏览 -
react 国际化
使用插件: i18next安装插件: npm install react-i18next i18next --sav//App.js import React, { Component } from react import ./App.css import i18n from i18next import { useTranslation, initReactI18next } from react-i18next import SiderDemo from ./Navi/N…
2022/4/2 23:49:36 人评论 次浏览 -
react配置-craco路径使用@符
react配置-craco路径使用@符 配置@符替代src并提供路径提示效果 配置路径别名目的:配置@路径别名简化路径处理安装包。npm i -D @craco/craco在项目根目录下,创建配置文件:craco.config.js。 在配置文件中就可以做自定义的修改,例如:配置路径别名 craco.config.js中 …
2022/4/2 23:21:29 人评论 次浏览 -
react搭建项目
1.npm install create-react-app -g2.create-react-app demo (demo为项目名)3.cd demo 4.npm install5.npm start //运行public里面的文件: favicon.ico即为html的ico 图标,可以替换 manifest.json,是app的配置文件,设置icons,首页路径等;src文件夹: …
2022/4/2 6:23:14 人评论 次浏览 -
react-类组件的路由传参-7种
react-类组件的路由传参-7种react-router-dom版本:"react-router-dom": "5.2.1"声明式导航 1. params传参---match {/* params传参 */} <NavLink to=/layout/First/zhangsan/18>First</NavLink><Route path=/layout/First/:name/:age…
2022/4/2 6:21:53 人评论 次浏览 -
基于react实现输入框数据双向绑定实现 函数组件hook
一、当需要实现函数组件的双向绑定时无非就是实现手动将事件对象加值变量 1.useState + value + onChange事件对象 =>输入框双想绑定const Input=()=>{const [message,setMessage] = useState();return(<><inputvalue={message}type="text"onCh…
2022/3/28 23:56:05 人评论 次浏览 -
vue和react知识加深
在REACT组件中: 1.基于数据驱动(修改状态数据,REACT帮助重新渲染视图)完成的组件叫做受控组件 ==>(受数据控制的组件) 2.基于ref操作的dom实现视图更新的,叫做非受控组件 =>在项目场景中,建议多使用受控组件 VUE:[MVVM] 数据更改视图跟着更改,视图更改数据…
2022/3/28 23:26:46 人评论 次浏览 -
基于react使用mobx的使用
1.mobx是一个轻量级的状态管理器,所以很简单(单一全局数据使用class)类有get 数据方法 我们需要把数据做成全局数据,并且这个数据不能污染全局数据 -- 应该是一个闭包(ES6 中class是一个语法糖,本身是一个函数) 所以应该定义一个类,然后导出一个实例(因为数据要全局通…
2022/3/27 23:25:11 人评论 次浏览