Xpy 的博客

github地址：https://github.com/remix-run/react-router/blob/main/docs/getting-started/tutorial.mddemo地址：https://stackblitz.com/edit/github-agqlf5一、安装npm install react-router-dom@6二、使用 BrowserRouter, Routes, Route这里注意与 v5 的区别Routes 组件替换 v5 的 Switch 组件；

一、目前接触到的前端下载文件的两种形式接口直接返回url，通过 js手动创建a标签、属性src指向返回的url，模拟点击事件来进行下载。接口直接返回数据流 或是 base64 格式数据、这类数据就需要用的 blob 对象和 URL.createObjectURL() 来手动生成url了，然后再通过模拟点击事件来进行下载。二、具体操作code（主要是第二种方法）1、blob 数据需要设置请求的返回typerequest 文件： file 需要下载的话传个 true// fetchfunc

有宽度：width:200px, 有宽度才能超出，所以至少是行内块级元素不能换行：white-space:nowrap;超出部分隐藏：overflow: hidden;文本超出部分点点点：text-overflow: ellipsis;div { width: 200px; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis;}.

一、场景需求如图，需要在一个路由中加入三个子路由，需要类似 vue的 【router-view+name】。二、实现./pages├── App.js├── threeChildren.js└── aaa.jsx└── bbb.jsx└── ccc.jsxApp.jsimport React, { Component } from "react";import { HashRouter, Switch, Route, Redirect } from "react-router

一、利用代理中间件 http-proxy-middleware注意：npn run start 报错问题：proxy is not a function 旧版写法 已被弃用module.exports = function(app) { app.use('/org',proxy({ target: 'http://99.999.999.999:000', changeOrigin: true, }) ); }; ```安装：$

一、安装：每一种动画效果需要单独安装单元素动画$ npm install rc-tween-one --saveCss样式动画$ npm install rc-animate --save进出场动画$ npm install rc-queue-anim --save文字动画$ npm install rc-texty --save页面滚动动画$ npm install rc-scroll-anim --saveBanner动画$ npm install rc-b

场景 使用触摸板 对浏览器进行前进后退，导致页面的路由Menu没有发生变化解决办法：通过对路由添加监听事件，手动触发onClick 事件 componentDidMount() { // 给当前路由加入监听事件 this.props.history.listen(location => { // 判断当前路由地址 和 发生变化后的 路由地址 是否一致 if(this.props.location.pathname!==location.pathname){

一、场景利用原始html input-type=“file” 写了一个上传文件的组件、但是每次上传之后，再次选择文件就不会触发 onchange 事件, 上传导致页面报错// trigger select filegetFilds = () =>{ const filedom = document.getElementById('file'); filedom.click()}// This function is used to listen for events uploa

一、场景产品给了个设计图，需要点击【自定义】图标或者其他图片来完成上传的动作。（打开选择文件弹窗，并选择文件）思路：利用 input-type 的 “file” 属性来完成。-首先隐藏掉原始的 html input，设置id属性【id = file】-点击自定的图片或者按钮，通过js模拟 input 的点击事件，从而触发打开选择文件窗口。 【dom.click()】-获取到的文件file通过 FormData 来储存 然后就可以直接发送给后台了。二、Code 如下（不重要的已经隐藏）

计时器：组价加载开始倒计时； 组件销毁需要清除倒计时，防止内存泄漏；需要用到hooks的状态管理 useState 来及时更新ui； 用到setInterval来实现计时功能；错误写法：const [count, setCount] = useState(6); // 2 倒计时useEffect(()=>{ // 3 创建倒计时 timer = setInterval(() => { console.log(`count`, count) // 因为

一、问题场景：在组件中想使用函数式路由跳转，根据官方文档查到：需要在该组件导出时 使用 withRouter(组件) 包裹组件；但是报错了！？官方文档 https://reactrouter.com/web/api/matchPathYou can get access to the history object’s properties and the closest 's match via the withRouter higher-order component. withRouter wi

一、场景我需要点击一个按钮，来选取本地的文件；获取到文件的对象后，再去处理或者上传；二、思路1、利用 H5 input 的 file 属性来选取文件；2、但是我不要展示这个控件，所以需要用一个【dom节点：比如按钮】来模拟这个 input 的 click 点击事件； 这个 input 需要隐藏：dispaly:none;3、选取文件之后、监听 onchange 事件就可以获取到文件了；input - accept 类型参考：MDN - 常见 MIME 类型列表三、实现import

使用的是react-create-app脚手架；一、期待用法css:.layout-header{ width: 80vw;}js:import styles from "./styles.module.css"const layout = (props) =>{ return <div> <div className={styles["layout-header"]}> </div>}export default lay

一、先暴露出webpack等相关配置文件npm run eject二、修改 config/webpack.config.js 文件配置const paths = require('./paths'); // config 中的一个文件resolve: { ... alias: { ... '@': paths.appSrc, // 增加这里 }}三、引用例：src / laylout / index.js 文件import Header from '@/comp