React
大雷神
这个作者很懒,什么都没留下…
展开
-
redux的入门学习 使用react-redux
1:使用react-redux 简化的 页面端的使用 业务的分离的分离不会变2:减少store的引入3:简化state的调用 和 state修改的方法的使用 类似vuex中 mapState和mapMutation第一步 安心 npm i react-redux第二步 引入和使用(全局配置)在index.js中 Provider 类似 vue中 依赖注入import React from "react";import ReactDo...原创 2021-01-07 18:12:16 · 923 阅读 · 0 评论 -
redux的入门学习 分离的巩固
1:新建一个两个页面 一个页面放用户的新增 一个页面用户的列表import React, { Component } from 'react'export default class UserAdd extends Component { render() { return ( <div> 新增用户 用户名<input ref="username"/>...原创 2021-01-07 16:05:31 · 455 阅读 · 0 评论 -
redux的入门学习 分离
1:分离 下面的 "add" 是常量 没有统一管理 99个人用的时候 都要是 add 如果第100个人把 add 改成了 +号 之前的99个人的功能就会出现问题 所以我们需要对action.type进行统一管理 switch(action.type){ case "add": return {num:state.num+action.num} case "reduce": r...原创 2021-01-07 11:46:13 · 520 阅读 · 0 评论 -
redux的入门学习 没有分离的版本
1:安装 npm i redux2:准备好几个页面 第一个显示数据 第二个做加法 第三个做减法import React, { Component } from 'react'export default class Menu1 extends Component { constructor(props){ super(props); } render() { return ( <div> ...原创 2021-01-07 11:19:22 · 630 阅读 · 0 评论 -
一张订单图做一个小项目十
完成订单页面新增订单 然后根据表格中的数据 生成pdf预览页面点击新增订单 弹出一个新增界面完成提交以后点击生成订单讲选择的内容全部带过来全剧终结:代码就不一一解析了 需要全部代码下载链接在:https://gitee.com/teacherLei/public27/ 有用请戳小星星 技术交流请加微信:15871437346...原创 2020-10-29 11:28:41 · 536 阅读 · 0 评论 -
react实现excel的导入和导出
1:安装插件 xlsx npm install xlsx --save 链接xlsx2:在项目里面新建一个until文件夹 在里面里面新建excel.js里面代码如下 可以直接复制粘贴拿走 分别是导入和导出的核心代码 不区分框架 react vue都可以使用import XLSX from "xlsx";//引入xlsx/** * 导入excel的函数 * @param {*} file */const importsExcel=(file)=&...原创 2020-07-29 15:42:17 · 10238 阅读 · 12 评论 -
react中多语言手动更改
1:安装多语言配置项我们选择i18nnpm install react-i18next i18next --save2:配置语言选项 我们只配置中英文 新建一个文件夹 locale然后再里面新建两个文件en.js和ch.js在里面分别写入代码 就是两个中英文配置3:在同目录里面新建一个index.js 写入import i18n from "i18next";import {initReactI18next} from 'react-i18next'impo.原创 2020-07-29 11:30:05 · 1124 阅读 · 0 评论 -
19React中手动切换组件
如图效果 点击两个不同的按钮 分别显示不同的组件内容构建两个组件分别为Child12.js和Child13.jsimport React, { Component } from 'react'export default class Child12 extends Component { render() { return ( ...原创 2020-01-16 18:07:41 · 1280 阅读 · 1 评论 -
17React中子组件的通信(子与子)
1:有个两个子组件 他们之前有数据交互新建两个子组件 Child8 和 Child9在Child9.js中写入代码import React, { Component } from 'react'export default class Child9 extends Component { constructor(props){ super(props...原创 2020-01-16 17:49:47 · 876 阅读 · 0 评论 -
18React子组件使用Context来进行通信
使用官方提供的方式 公共的上下文对象 类型Vue中 var bus = new Vue() bus.$on bus.$emit1:新建了一个公共的bus.js 写入如下代码import React from "react";const Context = React.createContext();export default Context;2:...原创 2020-01-16 17:49:09 · 971 阅读 · 0 评论 -
16React中组件的通信
1:父传子 使用props接受新建一个Child7.js 里面写入在App中引入和调用 以及数据的传递运行就可以看见结果2在子传父 通过调用子元素的事件来修复父元素的内容核心:谁的数据 数据的修改方式就谁里面定义 别人只能调用 需要处理的 如果把声明好的方法传过去num是属于App的 那么num修改的方式也属性App 传的App的方法给子组件去...原创 2020-01-16 14:12:05 · 2402 阅读 · 0 评论 -
15React购物车的事件
给每一个行都绑定好事件加法 减法 删除 全选 反选 统计下面是对减法的说明 文字描述中 加法有误 应该为减法2加法3:删除的说明4:单选按钮的说明5:全选按钮的说明6:统计的说明完整代码如此 上图有一个错误地方 num应该为allNumimport React, { Component ...原创 2020-01-16 10:00:26 · 1382 阅读 · 0 评论 -
14React实现购物车之列表渲染
实现列表的渲染新建一个Shoppingcar.js 在里面写入代码import React, { Component } from 'react'import "./shoppingcar.css"export default class Shoppingcar extends Component { constructor(props){ super(pr...原创 2020-01-16 09:29:39 · 1253 阅读 · 0 评论 -
13React中表单的类DOM操作
1:新建一个Child5.js 在里面写入import React, { Component } from 'react'export default class Child5 extends Component { constructor(props){ super(props); this.state = { num:1...原创 2020-01-15 15:00:22 · 736 阅读 · 0 评论 -
12React中单向数据在文本框中的操作
1:新建一个Child4.js在里面写入如下代码import React, { Component } from 'react'export default class Child4 extends Component { constructor(props){ super(props); this.state = { nu...原创 2020-01-15 14:51:41 · 599 阅读 · 0 评论 -
11React中单向数据操作之静态数据显示
1:新建一个Child3.js 并且引入到App.js中Child3中写入代码import React, { Component } from 'react'export default class Child3 extends Component { constructor(props){ super(props);//用来接收参数 this...原创 2020-01-15 14:47:10 · 719 阅读 · 0 评论 -
10React中组合(插槽)
1:改写App.js中Child2调用的写法import React, { Component } from 'react'import Child1 from "./Child1";import Child2 from './Child2';export default class App extends Component { constructor(props){ ...原创 2020-01-15 12:03:26 · 2076 阅读 · 0 评论 -
09React中判断和循环(if和map)
1:新建一项目 npx create--react-app lesson212:删除lesson21里面src目录中所有内容3:分别新建四个js文件 index.js App.js child1.js child2.js4:分别写入如下代码index.jsimport React from 'react'import ReactDom f...原创 2020-01-15 10:54:49 · 3981 阅读 · 0 评论 -
08React中事件的写法总结
1:事件与原生事件类型 react中式on+首字母大写的事件名 例如onClick如图 只需要on以后常用的事件都会提示出来2:在Content.js中新建一系列的按钮来对事件进行学习 2.1 普通的函数绑定 <button onClick={function(){alert('6666')}}>按钮1</button>2.2 ...原创 2020-01-14 17:30:59 · 2335 阅读 · 0 评论 -
07进一步使用插件来对props做数据类型的规范
1:资料来源https://www.npmjs.com/package/prop-types 利用第三方prop-types来处理 让props看起来有数据类型约束(js是弱语言没有数据类型的概率)2:安装npminstall--saveprop-types3:使用 在需要用的地方引入(Header.js)4:做一下测试会到index.js中 给Header传一...原创 2020-01-14 15:54:02 · 792 阅读 · 0 评论 -
06React中props和state
1:props是子组件用来接收父组件的数据 父组件如果传十个参数 但是子组件用了9个 就会导致子组件中满屏都是this.props 就很难去区分各个参数的作用2:将需要用的数据 放入constructor中进行提前说明 代码如下3:还需要跟子组件自身的数据有所区分才行(函数中参数和自己定义的内容) 可以使用state来做区分...原创 2020-01-14 15:38:42 · 777 阅读 · 0 评论 -
05React中props的使用(父传子)
1:准备工作 父组件(APP) 子组件(Header)改写index.js中APP内容2:数据传递的说明3:回到子组件(Header.js)4:如果调试看props 回到index.js中新增数据的传递 ps:useage 不是userage 少了一个r5:如果查看 回到Header.js中 加入红色框的内容 重新运行 就可以浏览器中查看结果6...原创 2020-01-14 15:25:01 · 1152 阅读 · 1 评论 -
04react中样式的使用(内联和外部样式表)
1:在src中新建了三个子组件分别为Header Content Footer2:在里面分别写入代码 建议用rcc快捷方式Header.js中import React, { Component } from 'react'var HeaderStyle = { color:"red"}export default class Header extends Co...原创 2020-01-14 12:01:08 · 1232 阅读 · 0 评论 -
03第一个class组件页面
1:准备工作在VSCode中安装es7插件 然后重启编译器生效 2:在src中新建一个js文件取名header.js 然后使用快捷方式rcc ps:rcc是class组件 rfc是函数组件3:在index.js中使用header组件 4:改造函数APP组件变成class组件5:完成以后记得保存 运行启动命令 npm run sta...原创 2020-01-14 11:35:18 · 1748 阅读 · 2 评论 -
02React第一个页面的详解之函数组件
1:研究<div>欢迎学习react</div>替代性 本质就是一个函数 函数可以调用 接收参数 并且有返回值2:拆分代码如下 普通的声明函数 结果跟之前一样3:函数的参数使用4:将函数变成组件的方式调用...原创 2020-01-14 10:31:16 · 1742 阅读 · 3 评论 -
01React第一个页面
1:准备工作 node的安装 没有的可以去官网根据自己的电脑下载(http://nodejs.cn/download/)2:运行命令 npx create-react-app lesson203:了解基本的rect组成 react 基本的语法 判断 循环 变量 react-dom 页面的操......原创 2020-01-14 10:19:21 · 5651 阅读 · 7 评论