React使用下来的插件

1、复制

copy-to-clipboard

npm install --save copy-to-clipboard
yarn add copy-to-clipboard

import copy from 'copy-to-clipboard';

export default () => {
   // 复制内容
   function copyCot(cot) {
    copy(cot); // 复制成功
  }

  return (
    <div onClick={() => copyCot()}>复制</div>
  )
};

react-copy-to-clipboard npm地址

2、下载图片

html2canvas

npm install --save html2canvas
yarn add html2canvas

import html2canvas from 'html2canvas'

  const exportImage = () => {
    // 获取 Charts 组件的容器元素
    const chartContainer = contentRef.current
    // 使用 html2canvas 将容器元素转换为 canvas
    html2canvas(chartContainer).then(canvas => {
      // 创建一个链接元素并设置下载属性
      const link = document.createElement('a')
      link.href = canvas.toDataURL() // 将 canvas 转换为数据 URL
      // 设置下载的文件名
      link.download = '图表.png'
      // 模拟点击链接以触发下载
      link.click()
    })
  }

3、动态操作类名

classnames

npm install --save classnames
yarn add classnames

import classNames from 'classnames'

// 使用方式
<span 
    className={classNames({active: activeKey === '1', marginRight:true})} 
    onClick={() => setActiveKey('1')}>
    表单配置
</span>

// 多个字符串 两种写法均可
classNames('mt10', 'font20') // => 'mt10 font20'
classNames('mt10 font20') // => 'mt10 font20'

//「字符串+对象」组合
classNames('switch', { selected: false }) // => 'switch'
classNames('switch', { selected: true }) // => 'switch selected'

// 对象 三种写法均可
classNames({ switch: true }, { selected: true }); // => 'switch selected'
classNames({ switch: true, selected: true }); // => 'switch selected'
classNames({ 'switch selected': true }); // => 'switch selected'

// 数组
classNames('font20', ['mt10', { switch: true, selected: false }]); // => 'font20 mt10 switch' 
// es6 模版字符串
let type = 'disabled';
classNames('radio', { [`radio-${type}`]: true }); // => 'radio radio-disabled'
classNames('radio', `radio-${type}`); // => 'radio radio-disabled' 

4、uuid

uuid github

npm install --save uuid
yarn add uuid

import { v4 as uuidv4 } from 'uuid';
console.log( uuidv4() )

5、jsplumb

讲解 英文文档 官网示例 github