array.reverse(), 会改变原来的数组, 并返回该数组 如果要不改变原数组, 需要完全复制一份新的数组 const arr = [1,2,3] // 1. ... const arr2 = [...arr].reverse() // 2. slice() const arr3 = arr.slice().reverse()

可以使用如下方法来完全复制原来的 state, 再进行操作 对于数组: concat, slice, 或 spread operator 对于对象: Object.assign 或 spread operator 参考 valentinog.com

Pure Function wiki definition: In computer programming a pure function is a that has the following properties: Its return value is the same for the same arguments. Its evaluation has no side effects. 同样参数总是返回相同的结果, 也就是函数内部没有随机生成的数 没有副作用, 指的是不会改变其它的变量的值, 不会有日志记录等 redux 的 reducer 中使用 纯函数, 输入一个 state, 在不改变输入的 state 的情况下, 返回一个 新的 state

一个页面中表单的 input 不能有相同的 name 值, 否则只有一个能输入

现象: import { BrowserRouter, Switch, // 不提示 Route, // 不提示 NavLink, useRouteMatch // 不提示 } from 'react-router-dom' 原因: // react-router-dom.js export { MemoryRouter, Prompt, Redirect, Route, Router, StaticRouter, Switch, generatePath, matchPath, useHistory, useLocation, useParams, useRouteMatch, withRouter } from 'react-router'; Switch, Route, useRouteMatch … 这类组件(或函数) 不是真正存在于 react-router-dom.js 文件中, 而是存在于 react-router.js 中导致 WebStorm 没有识别出来. 解决办法: 在 package.json 文件的 dependencies 加入 react-router "react-router": "^5.2.0", // 加入此行 "react-router-dom": "^5.2.0", 参考自 stackoverflow: Why does IntelliJ does not auto import react router hooks?

// jsx let match = useRouteMatch() console.log(match) // isExact: true // params: {topicId: "6"} // path: "/topics/:topicId" // url: "/topics/6" 在动态路由中 其中, path 指的是路由的名称, 路径; url 指的是当前页面真实的地址, 也就是地址栏中显示的 url 在非动态路由中, 二者是一样的

背景: 自定义了一个 MyNavLink, 统一修改了 activeClassName, 其它属性由 MyNavLink 转发到 NavLink // 定义组件 function MyNavLink(props) { return <NavLink activeClassName='my-active' {...props}/> } // 使用 <MyNavLink to='/home' className='link'}>a link</MyNavLink> 关键: 使用 ... 对 props 进行解构

<style> .inline-block { display: inline-block; width: 100px; height: 100px; background-color: #aaa; /*vertical-align: middle;*/ } </style> ... <div> <div class="inline-block"></div> <div class="inline-block>x</div> </div> 原因: 基线不一致 解决: 给 inline-block 类添加 veritcal-align 参考自csdn

this 指向问题 setTimeout 解决 参考hacpai: vue 疑难杂症三大定理

清空 input type=“file” 有两种方式 <input type="file"/> var file = document.getElementById('file'); // 第一种 //虽然file的value值不能设为有内容的字符，但是可以设置为空字符 file.value = '' // 第二种重新初始化file的html file.outerHTML = file.outerHTML 转自: 站内