React开发记录点

Layout、Sider、Menu

const currentPath = useLocation();

<Layout>
    <Sider id="leftMenu">
        <Menu theme="light" selectedKeys={[currentPath.pathname]}>
            <Menu.Item className="menu-item-class" key='/path1' >
                <Link to="/path1">content1</Link>
            </Menu.Item>
            <Menu.Item className="menu-item-class" key='/path2' >
                <Link to="/path2">content2</Link>
            </Menu.Item>
            <Menu.Item className="menu-item-class" key='/path3' >
                <Link to="/path3">content3</Link>
            </Menu.Item>
        </Menu>
    </Sider>
    <Content id="rightWrap">
            {/* 右边子控件显示插槽 */}
            <Outlet />
    </Content>
</Layout>

通过设置<Menu selectedKeys={[currentPath.pathname]}>，来保持侧边栏的选中状态和路由一致，即使手动修改浏览器路径。

react-router-dom v6以上路由跳转

const navigate = useNavigate();
navigate('/path');

目前好像只能在函数式组件里用，以前的类组件好像没办法跳转。

上传

const uploadProps = {
    listType: 'text',
    accept: "video/*",
    showUploadList: false,

    onSuccess: (res, file) => {
      console.log('on success res file', res, file);
    },
    onError: (err) => {
      console.log('onError ', err);
    },
    onProgress: ({percent}, file) => {
      console.log('onProgress ', percent, file);
    },

    customRequest: (options) => {
      console.log('customRequest', options);
      var formData = new FormData();
      formData.append('video', options.file);
      post(api, formData,{
        onUploadProgress: ({total, loaded}) => {
          console.log('total ', total);
          console.log('loaded ', loaded);
          options.onProgress({percent: Math.round((loaded/total)*100).toFixed(2)}, options.file);
        },
        timeout: 120000,
        cancelToken: token
      }).then(res => {
        console.log('s',res);
      }, error => {
      });
    },
  }

下载图片

export const download = (url) => {
    const anchor = document.createElement('a');
    anchor.style.display = 'none';
    document.body.appendChild(anchor);
  
    anchor.href = url;
    anchor.click();
    anchor.remove();
  };

计算字符串宽度

export function computeFontSize(str, fontSize){
    let spanDom = document.createElement("span");
    spanDom.style.fontSize = fontSize;
    spanDom.style.visibility = 'hidden';
    spanDom.style.display = 'inline-block';

    spanDom.innerHTML = str;
    document.body.appendChild(spanDom);

    let sizeD = {};
    sizeD.width = spanDom.offsetWidth;
    sizeD.height = spanDom.offsetHeight;
    spanDom.remove();
    return sizeD;
}

axios网络请求拦截器

axios.interceptors.request.use(
    (config) => {
        console.log('request config ' + config);
        config.headers = {
            'Authorization':AuthorizationValue,
        };
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

axios.interceptors.response.use(
    (response) => {
        console.log('response :', response);
        return response;
    },
    (error) => {
        console.log('response error:', error);
        return Promise.reject(error);
    }
);

代理

//setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
    app.use(createProxyMiddleware('/path', 
        {
            "target": 'http://ip:port',
            "changeOrigin": true,
        })
    );
};

生产环境去掉log

//config/webpack_config.js
new TerserPlugin({
          terserOptions: {
            parse: {
              ecma: 8,
            },
            compress: {
              ecma: 5,
              warnings: false,
              comparisons: false,
              inline: 2,
              //新增两个参数就行
              drop_debugger: true,
              drop_console: true,
            },

控制台设置源码不能调试

在项目根目录下，新增文件.env.production

//输入
GENERATE_SOURCEMAP=false