06 2022 档案
摘要:把stretch设为百分比值。 记得加单引号。否则报错
阅读全文
摘要:justify-content 属性 内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。 justify-content 语法如下 justify-content: flex-start | flex-end | center |
阅读全文
摘要:`white-space: break-spaces;` 是CSS的一个属性,用于指定如何处理元素内的空白字符。 当设置为`break-spaces`时,浏览器会在元素内的空白字符(空格、制表符、换行符等)处进行换行处理,而不会合并多个空白字符。这样可以确保文本内容在不断行的情况下仍然保持适当的间距
阅读全文
摘要:box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。 content-box,border和padding不计算入width之内 padding-box,padding计算入width内 border-box,border
阅读全文
摘要:时间选择器 <Form.Item label="生日"> {getFieldDecorator('birthday', { rules: [{ type: 'object', required: true, message: 'Please select time!' }], })(<DatePic
阅读全文
摘要:如果onclick事件有参数则点击事件应写成 <Button type="primary" onClick={() => updateItem(record)}> 编辑 </Button> 如果写成下面这种形式会默认执行并且会报相关错误 <Button type="primary" onClick=
阅读全文
摘要:const value = { ...values, birthday: values['birthday'].format('YYYY-MM-DD'), };//时间戳转字符串 moment(record.birthday, 'YYYY-MM-DD')//字符串转时间戳 # moment.js #
阅读全文
摘要:state: { // Reducer test: 'Dva 数据流:dashboard/test', data: [], num: 1, list: ['好好学习天天向上', 'good good study, day day up'], tableDate: [ { id: 1, name: '
阅读全文
摘要:1. 组件 render 渲染了一个对象, 当 state 已确定更新但视图未更新 2. 组件 render 渲染了一个列表, 当 state 改变视图更新异常 3. A 和 B 子组件共用一个父组件 state, 此时点击子组件 A 按钮更新了父组件 state, 但是子组件 B 视图不更新 4.
阅读全文
摘要:const newList = list.slice(); 不要用等号赋值 (一些引用类型直接复制不会引起页面的重新渲染,所以尽可能使用数组方法完成业务需求) 原因: 对象数组是引用方式 , 对于 react 来说它的值都是地址 (涉及到 tree diff),因为没有被重新赋值 (地址没有改变),
阅读全文
摘要:1、setState() 2、props发生变化 3、forceUpdate()
阅读全文
摘要:<Input style={{ marginTop: '10px', marginRight: '10px', width: '200px' }} onChange={changeInputValue} /> const changeInputValue = (e) => { //e:改变的值都可以
阅读全文
摘要:报错原因 在新版本的npm中,默认情况下,npm install遇到冲突的peerDependencies时将失败。 解决办法 使用--force或--legacy-peer-deps可解决这种情况。 --force 会无视冲突,并强制获取远端npm库资源,当有资源冲突时覆盖掉原先的版本。--leg
阅读全文
摘要:例如 npm i nrm -g 报 Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/nrm' 在命令前加上sudo即可 如: sudo npm i nrm -g
阅读全文
摘要:TodoList.js componentDidMount(){ store.subscribe(this.storeChange) //订阅 axios.get('https://........').then((res)=>{ const data=res.data const action=g
阅读全文
摘要:删除this,用props作为参数代替this.props 性能比类组件性能优秀 JSX语法必须引入React TodoListUI.js import React from 'react' import {Input,Button,List} from 'antd' const TodoListU
阅读全文
摘要:将组件中所用数据和方法通过props传给子UI组件,子UI组件调用这些数据和方法完成页面渲染(业务逻辑层的构造函数不变) TodtListUI.js import React, { Component } from 'react' import {Input,Button,List} from 'a
阅读全文
摘要:export const getListAction=(data)=>({ type:GET_LIST, data }) const action=getListAction(data) 调用该方法,取到的是括号内部的值 所以该写法可看作()=>{return{}} 首先这里用的时ES6的箭头函数
阅读全文
摘要:报错的意思应该是因为必须在组件挂载后订阅 componentDidMount(){ // store.subscribe(this.storeChange) //订阅 }
阅读全文
摘要:1.store必须是唯一的,多个store是坚决不允许的,只能有一个store空间 现在看 TodoList.js 的代码,就可以看到,这里有一个 /store/index.js 文件,只在这个文件中用 createStore() 方法,声明了一个 store,之后整个应用都在使用这个 store。
阅读全文
摘要:1.使用actionTypes.js文件定义Type减少代码冗余,代码复用 export const CHANGE_INPUT='changeInput' export const ADD_ITEM='addItem' export const DELETE_ITEM='deleteItem' im
阅读全文
摘要:export default function useCheckLogin(){ const [loginstate,setLoginState]=useState(false); let username=localStorage.getItem('user'); if(username!=nul
阅读全文
摘要:import axios from "axios"; const baseUrl = "http:/123.57.50.179:8900"; const getRequest = (path, params) => { return axios.get(baseUrl + path, { param
阅读全文
摘要:import localStorage from "localStorage";//引入 localStorage.setItem("userInfo", JSON.stringify(res.data.data));//存 localStorage.setItem("user", res.data
阅读全文
摘要:TodoList.js import React, { Component } from 'react' import {Input,Button,List} from 'antd' import store from './store'; class TodoList extends Compon
阅读全文
摘要:constructor(props){ super(props) this.state=store.getState() this.changeInputValue=this.changeInputValue.bind(this) this.storeChange=this.storeChange.
阅读全文
摘要:TodoList.js import React, { Component } from 'react' import {Input,Button,List} from 'antd' import store from './store'; class TodoList extends Compon
阅读全文
摘要:this的指向不对,需要用bind绑定this 例如 constructor(props){ super(props) this.state=store.getState() this.changeInputValue=this.changeInputValue.bind(this)//绑定 sto
阅读全文
摘要:扩展商店 1.浏览器里安装redux-devtools 谷歌: edge: 2.在项目的入口文件里 找到 createStore函数调用的地方,给它加第二个参数 window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENS
阅读全文
摘要:npm install --save redux react-redux //安装react-redux和redux "^4.2.0", 只装 redux也可 TodoList.js import React, { Component } from 'react' import {Input,But
阅读全文
摘要:npm install --save redux react-redux //安装react-redux和redux一般情况下安装redux即可,react-redux用法暂不明确
阅读全文
摘要:useNavigate() may be used only in the context of a <Router> component. //useNavigate()只能在<Router>组件的上下文中使用。 解决办法,将使用useNavigate或useHistory的组件和方法封装成一个新
阅读全文
摘要:import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; 使用 <Routers>包裹 来替代之前版本的<switch>且Route必须被包裹在Routes中 <Route path="/pd3" compo
阅读全文
摘要:找括号(括号匹配) Bracket Pair Colorizer ctrl+, 配置启用括号连线着色 自动生成注释插件 koroFileHeader ⭐⭐⭐一个插件迅速提升代码质量JavaScript Booster (js代码优化) 例如把if-else提示用三元运算符代替 多项目如何管理 Pro
阅读全文
摘要:前进后退不可使用 (独立页面相似意思) 普通式重定向 1.设置route <Route path="/home/" component={Home}/> 2.书写组件 import React, { Component } from 'react' class Home extends Compon
阅读全文
摘要:1.设置规则 <Route path="/list/:id" component={List}/> {/* 1.规则 */} 2.传值(或在地址栏自己设置) <li><Link to="/list/123">列表</Link></li> 3.接收值 import React, { Component
阅读全文
摘要:<Route path="/" exact component={Index}/> <Route path="/list/" component={List}/> /: 加exact 地址栏 /***匹配不到/对应的component 不加exact /***能匹配到 /list/: 加exact
阅读全文