制表符：component.getComponent 不是函数

Question

我在 Next/React 环境中使用 Tabular，当单击通过自定义格式化程序呈现的按钮时，我偶尔会收到以下信息：

component.getComponent is not a function

按钮/自定义格式化程序：

const EditButton = () => {
  const editor = document.createElement('button');
  editor.style.backgroundColor = '#000';
  editor.style.color = '#FFF';
  editor.innerHTML = 'Edit';
  editor.style.width = '100%';
  return editor;
}

按钮事件：

const handleEditButtonClick = (e, c) => {
  const el = e.target as HTMLButtonElement;
  const data = c.getRow().getData();
  console.log(el, data);
}

制表符通过 useEffect 初始化：

  let el = React.createRef();
  let tabulator: typeof Tabulator | null = null;
  
  useEffect(() => {
    if (el.current) {
      tabulator = new Tabulator(el.current, {
        data: [...productsData()],
        columns: columns,
      });
    }
  }, [el]);

并渲染：

  return (
    <div ref={el} style={{ width: '100%', height: '100%' }} />
  );

专栏：

{ formatter: EditButton, cellClick: handleEditButtonClick }

有什么想法吗？

Answer 1

如果不查看完整的组件代码，很难说是否是这种情况，但在我的例子中，列/行选项是在组件内计算的。这导致选项在渲染时重新计算，我假设这也会导致表格重新渲染。我相信这会导致像

c.getRow().getData();

这样的事情失败，因为之前渲染的

c

已经消失了。

只需将选项计算放入 useMemo 挂钩即可解决问题。

Answer 2

单击行时遇到同样的问题，添加后消失

selectable:true

在 ReactTabulator 选项中