制表符: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挂钩就解决了问题。