React中如何限制react-spreadsheet组件的列数

要解决复制多列数据时自动新增列的问题，可以通过两种方式实现：

方法一：在onChange回调中截断多余列 #

通过自定义onChange处理函数，对新数据的每一行进行截断，只保留前2列：

import Spreadsheet from "react-spreadsheet";
import { useState } from "react";
  
export default function Sheet(){
  const [data, setData] = useState([
    [{ value: "Col1" }, { value: "Col2" }],
  ]);

  const handleChange = (newData) => {
    // 遍历每一行，保留前2列，截断多余部分
    const limitedData = newData.map(row => row.slice(0, 2));
    setData(limitedData);
  };

  return(
  <div>
    <h4>SpreadSheet</h4>
    <Spreadsheet data={data} onChange={handleChange} />
  </div> 
  )
};

方法二：使用组件的columns属性固定列数 #

react-spreadsheet提供了columns属性，可以直接指定列的数量和配置，固定列数后组件不会自动新增列：

import Spreadsheet from "react-spreadsheet";
import { useState } from "react";
  
export default function Sheet(){
  const [data, setData] = useState([
    [{ value: "Col1" }, { value: "Col2" }],
  ]);

  return(
  <div>
    <h4>SpreadSheet</h4>
    <Spreadsheet 
      data={data} 
      onChange={setData}
      columns={[{}, {}]} // 明确指定2列
    />
  </div> 
  )
};

两种方法都能有效限制列数，推荐优先使用columns属性，这是组件原生支持的固定列数方式，更简洁可靠。

内容的提问来源于stack exchange，提问作者SM079