weixin_43294560的博客

受控组件：将React里的state属性和表单元素的值建立依赖关系，再通过onChange事件与setState()结合更新state属性，就能达到控制用户输入过程中表单发生的操作。被React以这种方式控制取值的表单输入元素就叫做受控组件。class TestComponent extends React.Component { constructor (props) { super(props); this.state = { username: "lindaid

import ReactDom from 'react-dom'添加节点: ReactDom.render(ReactNode,挂载的dom对象) 将内容添加到dom对象内 卸载节点: let state=ReactDom.unmountComponentAtNode(挂载的dom对象) 返回是否删除成功bool值 删除dom对象内的内容代码示例: const div = document.createElement('div'); document.body.appe

1、在项目根目录与src同级创建.env文件2、环境变量 (1)自定义环境变量 1、可以在其他文件访问的自定义环境变量必须以REACT_APP开团 REACT_APP_xxx=x x就是字符串,不需要添加引号 2、可以设置其他任意自定义变量,只能在本文件访问,不区分大小写 (2)使用其他环境变量 REACT_APP_xxx=$xx 必须使用$,否则会认为是字符串 (3)在tsx/js文件中使用 {process.env.REACT_APP_NAME}

在componentWillUnmount中处理 1、定时器 clearTimeout/clearInterval 2、如监听滚动条的dom事件 window.onScroll=null; 3、网络请求 当网速较慢时,发起网络请求还未接收到就跳转到其他页面 原因是当离开页面以后，组件已经被卸载，执行setState时无法找到渲染组件。 这里通过离开页面时重写setState方法且不返回任何数据来解决,使得组件中的setState方法无效 this.setState

和innerHTML效果一样,能够识别文本中的标签用法:<p dangerouslySetInnerHTML={ __html: xxx } />

1、安装 cnpm install --save react-swipeable-views 2、引入 import SwipeableViews from 'react-swipeable-views'; import { autoPlay } from 'react-swipeable-views-utils'; const AutoPlaySwipeableViews = autoPlay(SwipeableViews);3、使用 <AutoPlaySwipeableV

1、安装 cnpm install -D env-cmd 2、和src同级新建.env-cmdrc文件 { "dev":{ "PORT":"端口号", 启动端口 "REACT_APP_API_URL":"/xx" 公共api } } 3、修改package.json的"script": "start": "env-cmd -e dev xxx",代码示例:{ "dev":{ "PORT":"5050", "REAC

不能将使用了react-router-dom的组件暴露在BrowserRouter之外解决:将组件放在BrowserRouter内代码示例:import React,{Component} from 'react'import Header from './common/header'import {CreateGlobalStyle} from './style.js';import {Icon} from './statics/iconfont/iconfont'import {Bro

1、在public目录下创建json文件 如:public/api/data.json 2、在json文件中自定义数据3、当请求url为'api/data.json'时,会自动去到public目录下查询,并返回json内容代码示例:import {SEARCH_BLUR,SEARCH_FOCUS} from './action-type'import axios from 'axios'export const searchFocus=()=>({type:SEARCH_FOC

1、cnpm install mockjs -S2、在index.js引入mock.js文件 判断是否是生产环境 if(process.env.NODE_ENV=='development') { require("mock.js文件所在路径"); } 3、创建js文件 (1)引入 var Mock = require('mockjs') (2)设置数据返回时间 Mock.setup({ timeout:毫秒, }) (3)设置返回数据:

1、安装 cnpm install styled-components --save 2、创建js文件,写全局样式 import {createGlobalStyle} from 'styled-components' export const x= createGlobalStyle ` 全局css样式 `3、在主入口文件中(App.js) import {x} from './xx.js' 在标签所在任意位置放上即可 <x />4、一般标签样式(如div)

设置一组动画 1、安装 cnpm install react-transition-group --save 2、引入 import { CSSTransition } from 'react-transition-group'; 3、使用 <CSSTransition in={show} 动画触发布尔值 timeout={n} 动画时间n毫秒 classNames='xx' 设置出现隐藏动画的类名

1、下载 cnpm install braft-editor --save 2、引入 引入编辑器组件 import BraftEditor from 'braft-editor' 引入编辑器样式 import 'braft-editor/dist/index.css'3、使用 <BraftEditor value={初始值xx} onChange={改变内容回调} onSave={保存时回调} />4、设置初

1、引入 import {Upload} from 'antd' 全局引入样式:import 'antd/dist/antd.css' 2、使用 <Upload name="上传名称,和后台约定" listType="picture-card" className="样式类" showUploadList={false} action="后台地址" onChange=

作用: 能够更方便地给组件传递额外的属性 <Route path={xx} render={props=>{ return <组件 {...props}></组件> </Route> 因为渲染的组件不是路由组件,所以需要传入props代码示例:import React from 'react';import './App.css';import {Switch,Route,Redirect} from 'reac

cnpm install --save [email protected] [email protected]

1、安装 cnpm install rc-queue-anim --save 2、引入 import QueueAnim from 'rc-queue-anim'; 3、使用: <QueueAnim delay={300} className="queue-simple"> <div key="a">Queue Demo</div> <div key="b">Queue Demo</div> <div

如使用:this.props.history、this.props.location、this.props.match等1、引入 import {withRouter} from 'react-router-dom' 2、将export default类取消,改写成在最后 export default withRouter(类名);代码示例:import React,{Component} from 'react'import {TabBar} from 'antd-mobile'i

1、在package.json中添加 "proxy":"http://127.0.0.1:4000" 2、请求url时 axios.get('/路由名')即可

1、在index.css设置html、body、#root的高度为100%2、在组件中设置最外层高度为100%

react中src直接写本地路径图片不会显示1、require src={require('本地图片路径')} 2、import import img from '本地图片路径' src={img}

1、下载 cnpm install --save less less-loader 2、在node-modules/react-scripts/config/webpack.config.js中 (1)大概61行后,sass匹配后面放置less const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/; (2)在大概539行,sass配置文件后配置less { test: le

1、安装 cnpm install antd-mobile --save cnpm install babel-plugin-import --save-dev cnpm install react-app-rewired customize-cra --save-dev 2、设置按需加载和按需打包 (1)在项目根目录创建(与src同级),config-overrides.js文件 const { override, fixBabelImports } = require('custom

解决组件间数据传递(兄弟、子父和多层都可以使用)当触发发布,就会触发订阅1、安装npm install pubsub-js2、发布消息: import PubSub from 'pubsub-js'; PubSub.publish('发布名称',数据);3、订阅消息: import PubSub from 'pubsub-js'; PubSub.subscribe('订阅发布的名称',function(msg,searchName){ msg:订阅的名称 sear

xx.map(item=>({键值对}))

监听组件传递的值： componentWillReceiveProps(newProps) { 参数为给组件传递的参数 } 监听组件内部状态的变化:componentDidUpdate(prevProps,prevState){ 参数分别为改变之前的数据状态对象 if(prevState.属性名!=this.state.属性名) { ... }}代码示例: //组件接收新属性时调用 componentWillReceiveProps(newProps)

针对react脚手架环境设计的ui库 1、安装 cnpm install -S antd 2、修改成按需加载 (1)安装依赖 cnpm -D install react-app-rewired customize-cra (2)修改package.json中的scripts 将原本对应内容替换成如下内容 "start": "react-app-rewire...

npm install react-router-dom@61、基本使用 import {BrowserRouter,Routes,Route} from "react-router-dom" Routes:代替<Switch> ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById("root") );

import {BrowserRouter} from 'react-router-dom'1、用BrowserRouter管理整个应用 在index.js中,将<App />用<BrowserRouter>包裹起来2、路由跳转 import {NavLink,Link} from 'react-router-dom' NavLink和Link都可以实现,且用法相同 <NavLink to='/about'>About</NavLink&g

1、安装 cnpm install -S [email protected] [email protected]、引入 import {BrowserRouter as Router,Link,Route} from 'react-router-dom' 可以使用as xx重命名BrowserRouter3、BrowserRouter可以有多个,但其中的路由只能是一个或...

路由4版本 传递参数 和路由3版本一样 (1)路由path中添加/:键名 (2)Link中添加{es反引号方式/字符串拼接}传递变量值 (3)组件中{this.props.match.params.键名} 路由嵌套和版本3一样 不同:嵌套的父组件要写成<组件名 path='xx'></组件名>的形式 且无IndexRoute...

路由4版本 1、安装 cnpm install -S [email protected] [email protected] 2、在路由主入口文件引入 import React,{Component} from 'react' import {Route,BrowserRouter,Swicth} from 'react-router-dom' 其中: ...

路由跳转写待参数 1、在主入口的路由路径中,末尾添加/:键名 若传递多个参数 以/:xx/:xx的形式添加 2、在跳转的Link标签对应的路径中,末尾添加/键值 其中若传递的值是变量: 两种写法: 1、路径为:{'xx/'+变量} 内部为引号 2、路径为:{`x/${变量}`} 以es6写法,发反引号和${} 加大括号是因为解析j...

路由嵌套 在一个路由中加载多个子路由 1、在主入口路由文件引入子路由 2、将子路由放入对应的父路由内,且子路由名称是在父路由名字基础上追加,否则跳转时会因跳转路径问题报错 <Router xx>> <Router xx></Router> </Router xx> 3、在父路由对应的组件内,添加Link标签设置跳转,别...

路由 单页面应用 1、安装 cnpm install --save [email protected] 2、在主入口文件引入 import {Router,Route,hashHistory,IndexRoute} from "react-router" import xxx from xx //引入路由要加载的组件 其中: 在Router内的Route为路由,h...

除了在nodejs里面的路由请求中设置外 res.set('Access-Control-Allow-Origin', '*'); 对于使用creat-react-app构建的项目 1、npm run eject 将当前位置抛出,让我们可以修改配置文件 2、在package.json中添加 "proxy": "proxy":"http://localhost:后台服务器名称...

1、通过node.js搭建服务器,且必须有跨域请求2、php搭建的不行,估计是跨域的问题3、在页面渲染后的componentDidMount()生命周期函数中发送请求代码示例:react.js文件import React ,{Component}from 'react';import User from './user'class App extends React.Compon...

ref两种写法 添加ref后,将使用js的方式来操作标签 第一种: (1)在构造函数中声明 this.xx=React.createRef(); (2)在要操作的标签上添加 ref={this.xx} (3)即可配合事件操作该标签 this.xx.cuurent.js操作dom方式; 如:this.xx.current.innerHT...

1、引入库 import xx from 'prop-types'; 2、配置参数信息(不符合只会报警告,不会中断程序) (1)传参类型 组件名.propTypes={ 参数名:xx.数据类型} (2)传参只包含一个参数,且必须传递该参数 组件名.propTypes={参数名:xx.element.isRequired} (3)参数默认值 组件名.de...