react学习 - 随笔分类 - 猫头唔食鱼

react路由的简单例子2

摘要：这个和我上一篇文章是差不多的，只不过这里的组件都不是无状态组件 Test.js import React, { Component } from "react"; import { BrowserRouter as Router, Route, Link } from "react-router-d 阅读全文

posted @ 2020-11-15 03:36 猫头唔食鱼阅读(92) 评论(0) 推荐(0) 编辑

react路由的一个简单例子

摘要：1.安装 yarn add react-router-dom 2.引入 BrowserRouter, Route, Link import React from 'react'; import { BrowserRouter as Router, Route, Link } from 'react- 阅读全文

posted @ 2020-11-15 02:43 猫头唔食鱼阅读(240) 评论(0) 推荐(0) 编辑

在react里使用mock.js

摘要：1.安装 npm i mockjs -D 2.新建mockData.js import Mock from 'mockjs' export default Mock.mock('/data','get',{ // 属性 list 的值是一个数组，其中含有 1 到 10 个元素 'list|1-10' 阅读全文

posted @ 2020-11-14 18:27 猫头唔食鱼阅读(1412) 评论(0) 推荐(0) 编辑

setState的回调

摘要：setState是异步的如果想操作dom一定要在setState的回调里例子：获得ul里li元素的个数 import React, { Component } from 'react'; class Test extends Component { constructor(props) { s 阅读全文

posted @ 2020-11-12 17:10 猫头唔食鱼阅读(1133) 评论(0) 推荐(0) 编辑

react的propTypes和defaultProps

摘要：1.propTypes 子组件规定父组件传过来的值的类型注意下面注释的地方 import React, { Component } from 'react'; import PropTypes from 'prop-types' // PropTypes 首字母大写 class Child ext 阅读全文

posted @ 2020-11-12 14:39 猫头唔食鱼阅读(172) 评论(0) 推荐(0) 编辑

使用styled-components初始化css

摘要：1.安装 yarn add styled-components 2.创建style.js import {createGlobalStyle} from 'styled-components' // 导出的变量要大写开头 export const CreateStyle = createGlobal 阅读全文

posted @ 2020-10-24 15:20 猫头唔食鱼阅读(241) 评论(0) 推荐(0) 编辑

react切换隐藏或显示状态(包含过渡动画)

摘要：App.js import React, { Component } from 'react'; import './style.css' class App extends Component { constructor(props) { super(props); this.state = { 阅读全文

posted @ 2020-10-11 00:47 猫头唔食鱼阅读(1152) 评论(0) 推荐(0) 编辑

react项目使用axios和Charles模拟数据接口

摘要：0.安装Charles中文破解版 1.安装axios yarn add axios 2.引入axios import axios from 'axios' 3.写好json文件test.json ["vue","react","ng"] 4.配置Charles （1）选择工具/本地映射（2）本地映阅读全文

posted @ 2020-10-10 00:58 猫头唔食鱼阅读(178) 评论(0) 推荐(0) 编辑

react里使用ref的几种方法

摘要：方法一：类似vue的写法，标签里定义一个$ref ，然后通过this.refs.xxx获取dom {/* 方法一：类似vue的写法 */} <span ref="test">test</span> // 获取ref只能在componentDidMount里 componentDidMount(){ 阅读全文

posted @ 2020-10-10 00:22 猫头唔食鱼阅读(636) 评论(0) 推荐(0) 编辑

redux devtools的使用

摘要：1.下载插件后，把插件拖动到谷歌浏览器的扩展程序里。 2.在createStore方法里添加第二个参数（第一个是reducer）， window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() import 阅读全文

posted @ 2019-08-01 20:57 猫头唔食鱼阅读(745) 评论(0) 推荐(0) 编辑

redux获取store中的数据

摘要：1.安装redux 2.创建store文件夹，创建store.js 3.创建reducer.js 4.在store.js中引入reducer，并在createStore方法里传入reducer 5.在App.js中，引入store，使用store.getState()方法,获取state 阅读全文

posted @ 2019-07-22 22:46 猫头唔食鱼阅读(7839) 评论(0) 推荐(1) 编辑