在 React 中调用制表函数

Question

我在 React 下使用 Tabulator 和 react-tabulator 模块。

我错过了一些非常基本的东西，可能是由于我对 React 的新了解。实现这个模块，我知道如何将制表器回调连接到 JavaScript 函数。但我不知道如何调用制表器方法。例如：

  const options = {
    height: '100%',
    ajaxURL: 'http://example.com',
    ajaxProgressiveLoad: 'scroll',
    ajaxError: (error) => {
      console.log('ajaxError ', error);
    },
  };

...

      <ReactTabulator
        columns={columns}
        layout="fitColumns"
        data={[]}
        options={options}
      />

这里 ajaxError 回调被传递给 ReactTabulator，并在适当的时候调用。

现在，tabulator 模块有很多方法，例如 setData。在 React 之外，这将按如下方式使用：

var table = new Tabulator("#example-table", {
    ajaxURL:"http://www.getmydata.com/now", //ajax URL
});

...

table.setData("http://www.getmydata.com/now");

由于我无法直接访问“表”对象的等效项，因此如何将其转换为 React 世界（在钩子环境中）？我是否需要使用 getElementById 或类似的方法来访问我的制表器对象？

Answer 1

我相信解决方案是使用此处描述的 ref：\n https://reactjs.org/docs/refs-and-the-dom.html \n，在以下部分中：

\n\n

\n

参考和功能组件

\n\n

默认情况下，您不能在函数组件上使用 ref 属性，因为它们没有\xe2\x80\x99t 实例：

\n\n

...

\n\n

但是，只要引用 DOM 元素或类组件，您就可以在函数组件内使用 ref 属性：

\n

\n\n

使用这种方法，我可以访问我的制表器 setData 方法。

\n\n

const tableDisplay = (props) => {\n  const tableRef = createRef();\n\n  // I can now use setData in various effects:\n  // if ((tableRef.current) && (tableRef.current.table)) {\n  //    tableRef.current.table.setData();\n\n  return (\n      <ReactTabulator\n        ref={tableRef}\n        columns={columns}\n        layout="fitColumns"\n        data={[]}\n        options={options}\n      />\n  );\n};\n

\n\n

这工作得很好，我只是不确定这是“干净”的方法吗？

\n