Category Archives: 前端技术

如何在React组件中动态加载js脚本

网上找了很多方案,比如react-helmet等各种包,都不行。

从原理上,他们都是类似如下的原生方案:
const script = document.createElement("script");
script.src = url;
document.head.appendChild(script);
这种方案是存在问题的,script是异步加载的,不等加载完毕直接往下执行,是找不到对象的。

这里给出最终解法:在onload回调中再渲染。
interface Prop[......]

继续阅读

使用AntDesign的MenuItem如何再集成React Router

新版AntD已经不能使用MenuItem了,而是需要传入数据,这样使用React Router会有点麻烦。

解决方案是给Menu做一个click事件,里面再使用useNavigate分发路由,如下:
import { Breadcrumb, Layout, Menu } from 'antd';
import React, { Fragment } from 'react';
import {
Routes,
Route,
useNavigate
} from "[......]

继续阅读

论跨域头Access-Control-Allow-Origin如何正确的支持多域名

参考这篇文章:《Cors跨域(三):Access-Control-Allow-Origin多域名?》

先说错误的方式:

  1. Access-Control-Allow-Origin不支持逗号分隔、不支持分号分割
  2. Access-Control-Allow-Origin不支持多次重复的头设置,只能支持一个
  3. Access-Control-Allow-Origin不支持通配符,例如*.abc.com是不行的

再说正确的:

  1. Access-Control-Allow-O[......]

    继续阅读

如何在浏览器中使用npm的js库(browserify)

npm中的js库很全面,但一般是用于node.js环境中的。

有些时候,我们想在浏览器环境中,直接使用npm的库,怎么办呢?

至少有两种方法:

  • 方案1:走webpack等打包工具
  • 方案2:走browserify

本文主要介绍方案2,browerify的方案更简单,很好操作。
1、安装browerify
cnpm install -g browserify
2、安装npm库
需要先通过npm安装下,比如这里,我们想使用这个库
cnpm i sm-cryp[......]

继续阅读