基于React封装Handsontable并兼容antd

Javon_huang

已于 2024-04-27 22:52:24 修改

阅读量790

点赞数 5

CC 4.0 BY-SA版权

分类专栏： handsontable 文章标签： react.js 前端 javascript

于 2024-04-12 14:01:46 首次发布

本文链接：https://blog.youkuaiyun.com/Javon_huang/article/details/137674667

背景

其实Handsontable官方也提供了React的版本，但是官方的版本再编辑和渲染的时候并不能够很好的嵌入第三方的组件库。这就导致了，使用了Handsontable就没有办和普通的react项目一样轻松引用其他第三方组件。因此对其react的版本进行了二次的封装，使其可以轻松的兼容第三方组件库。

Demo

git:GitHub - JavonHuang/jv-react-handsontable

体验地址：Gitpage-https://javonhuang.github.io/jv-react-handsontable/

安装

npm i @javonhuang/rh-table

引用

import { RHTable } from "@javonhuang/rh-table";
import '@javonhuang/rh-table/style'

数据渲染

const ScoreRenderer = (props:any) => {
  const { value } = props;
  const color = value > 60 ? '#2ECC40' : '#FF4136';
  return (
    <span style={
      
      {
      
       color }}>我的分数：{value}</span>
  );
};

 {
      title:"分数",
      dataIndex: "score",
      readOnly: false,
      validator: (e) => { 
        return new Promise((resolve) => {