暴走的react
常威在打来福~
这个作者很懒,什么都没留下…
展开
-
redux&&react-redux
connect:Provider内部组件如果想要使用到state中的数据,就必须要connect进行一层包裹封装,换一句话来说就是必须要被connect进行加强。Provider接收store作为props,然后通过context往下传递,这样react中任何组件都可以通过context获取到store。1.Provider: 这个组件能够使你整个app都能获取到store中的数据。connect就是方便我们组件能够获取到store中的state。获取store里的属性值用store.getState()原创 2023-08-31 16:40:40 · 297 阅读 · 0 评论 -
react 、table中复选框多个只能选择一个
<Table rowSelection={{ columnTitle: ' ', selectedRowKeys: [this.state.setKey], onChange: (selectedRowKeys, selectedRows) => { this.setState({ setKey: selectedRowKeys.length === 2 ? selectedRowKeys[1] : selectedRowKeys[0], select原创 2021-10-13 15:52:19 · 853 阅读 · 0 评论 -
react中使用BMapGL地图展示
要引入mapbox-gl和@mapbox/mapbox-gl-language这两个包,百度搜索下import React from 'react';import mapboxgl from "mapbox-gl";import MapboxLanguage from "@mapbox/mapbox-gl-language";// require('https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js')mapboxgl.setRTLTe原创 2021-07-05 18:01:13 · 1624 阅读 · 1 评论 -
百度地图普通ip定位
先在项目index.html文件中引入秘钥js文件:<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=KgAkTzltXytNwRxpIRqXd0mzvu3yiMtu"></script>// 初始化地图实例 // const map = new BMapGL.Map("container") // 注意:在rea.原创 2020-11-11 23:27:21 · 910 阅读 · 0 评论 -
react中使用百度地图报错:‘BMapGL‘ is not defined no-undef解决方法
如果报错:‘BMapGL’ is not defined no-undef那就加个 window.原创 2020-11-11 23:04:11 · 10448 阅读 · 13 评论 -
react手机端项目注意点,ant design-mobile框架
1.先新建一个项目,下载导入react, react-dom, react-router-dom包,如果使用sass预编译就下载导入node-sass,并用后缀名.scss(常用), .sass后缀名文件,哪里需要在哪导入sass样式文件2.父路由与嵌套子路由3.TabBar菜单栏的切换选中高亮this.props.location.pathname注意: 由于这是个父子嵌套路由,如果在子路由里面改变了浏览器localtion,pathname的值后,父路由中的菜单栏没有与之对应选中高亮,那么就原创 2020-10-14 23:56:26 · 1275 阅读 · 0 评论 -
react项目中使用sass
因为脚手架中已经有了sass,用的话只需要导个包 node-sass原创 2020-10-14 23:25:17 · 654 阅读 · 0 评论 -
react手机端TabBar用法
在路由组件中使用嵌套路由import React from 'react'import { TabBar } from 'antd-mobile';import {Route} from 'react-router-dom'import Index from '../../pages/Index' // 引入子组件,下面生成嵌套路由import HouseList from '../../pages/HouseList' // 引入子组件,下面生成嵌套路由import News from '..原创 2020-10-13 23:50:36 · 1519 阅读 · 2 评论 -
react路由与嵌套路由
嵌套路由原创 2020-10-13 21:44:26 · 100 阅读 · 0 评论 -
react初始化项目
原创 2020-09-29 00:12:04 · 76 阅读 · 0 评论 -
react路由:编程式导航路由笔记
import React from 'react'import {BrowserRouter as Router, Route, Link} from 'react-router-dom'// ---------------一、编程式导航-------------- // 场景:点击登录按钮,登录成功后,通过代码跳转到后台首页,如何实现? // 编程式导航: 通过JS代码来实现页面跳转 // class Login extends React.Component { // h原创 2020-09-28 22:27:29 · 388 阅读 · 0 评论 -
react路由笔记
一、路由介绍二、路由的基本使用2.1使用步骤1.安装:npm i react-router-dom -S / yarn add react-router-dom2.导入路由的三个核心组件:Router / Route / Linkimport { BrowserRouter as Router, Router, Link} from ‘react-router-dom’3.使用Router组件包裹整个应用(重要)二、路由的基本使用import React from 'react'//原创 2020-09-25 00:40:52 · 103 阅读 · 0 评论 -
react父子组件,兄弟组件,爷爷到孙子组件笔记
import React from 'react'import App from './App'// 1.父传子、// 2.子传父class ComCent extends React.Component { // 组件的props特点: // 1.可以给组件传递任意类型的数据 // 2.props是只读的对象,只能读取属性的值,无法修改对象 // 3.注意:使用类组件时,如果写了构造函数,应该将props传递给super(),否则,无法在构造函数中获取到props constr原创 2020-09-24 23:50:54 · 2428 阅读 · 0 评论 -
react组件性能优化笔记
一、减轻state1.减轻state:只存储跟组件渲染相关的数据(比如:count/列表数据/loading等)2.注意:不用做渲染的数据不要放在state中,比如定时器等3.对于这种需要在多个方法中用到的数据,应该放在this中class Mouse extends React.Component { // state = { // x: 0, // y: 0 // } // handleMouseMove = e => {原创 2020-09-24 23:32:51 · 111 阅读 · 0 评论 -
setState()的说明笔记
// setState()的说明 // 1.1更新数据 // setState()是异步的 // 注意:使用该语法时,后面的setState()不要依赖于前面的setState() // 可以多次调用setState(),只会触发一次重新渲染 // 1.2推荐语法(如果有两个setState()方法,返回的结果还是一样的,互不干扰, // 用了这个语法后第一个setState()里面的会影响到第二个setState()) // 推荐:使用setStat原创 2020-09-24 22:18:53 · 216 阅读 · 0 评论 -
react高阶组件笔记
import React from 'react'import PropTypes from 'prop-types'// 导入图片资源// import img from '@/logo192.png'// 创建Mouse组件class Mouse extends React.Component { // 鼠标位置state state = { x: 0, y: 0 } handleMouseMove = e => { this.setState({原创 2020-09-24 00:38:54 · 66 阅读 · 0 评论 -
react的生命周期笔记
import React from 'react'// 这个组件讲诉的是组件的生命周期// 1.组件生命周期的意义:组件的生命周期有助于理解组件的运行方式、完成更复杂// 的组件功能、分析组件的错误原因等// 2.组件的生命周期:组件的从被创建到挂载到页面中运行,再到组件不用时卸载的过程// 3.生命周期的每个阶段总是伴随着一些方法调用,这些方法就是生命周期的钩子函数// 4.只有类组件才有生命周期// --------------------------二、生命周期的三个阶段-------原创 2020-09-23 23:32:43 · 79 阅读 · 0 评论 -
3.react的组件
1.实例方法是挂载在原型上的静态方法是挂载在构造器上的原创 2020-09-17 17:26:33 · 74 阅读 · 0 评论 -
react中两种渲染数组的方式和用函数装组件html内容
<ul> { // this.state.contentList.map(item => ( // <li key={item.id}> // <h3>评论人:{item.name}</h3> // <p>评论内容:{item.content}</p> // </li> // )) this.state.contentList.map(原创 2020-09-16 23:54:40 · 805 阅读 · 0 评论 -
第三篇 React组件基础
一、React组价介绍(这里和vue的组件就很像啦)组件是React的一等公民,非常重要,使用React就是在使用组件组件表示页面中的部分功能结合多个组件实现完整的页面功能特点:可复用、独立、可组合二、React组件创建的两种方式1.使用函数创建组件 使用JS的函数(或箭头函数)创建的组件:用函数名作为组件标签名 function Hello() { return ( ...原创 2020-03-21 16:00:15 · 134 阅读 · 0 评论 -
第二篇 React JSX的使用方法
一、JSX的基本使用方法1.基于createElement()方法的问题,那么JSX就出来啦,至于createElement()方法有什么问题呢:1.繁琐不简洁2.不直观,无法一眼看出所描述的结构3.不优雅,用户体验不爽2.什么是JSX?JSX是JavaScript XML的简写,表示在JavaScript代码中些XML(HTML)格式的代码优势:声明式语法更加直观、与HTML结构...原创 2020-03-19 23:24:34 · 234 阅读 · 0 评论 -
第一篇 react的基本使用
1.react的安装npm i react react-domreact包是核心,提供创建元素、组件等功能react-dom包提供dom相关功能等2.创建react项目创建react项目在这里插入代码片原创 2020-03-16 23:46:57 · 143 阅读 · 0 评论