在 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 或類似的東西來訪問我的 tabulator 對象？

Answer 1

我相信解決方案是使用如下所述的 ref： https : //reactjs.org/docs/refs-and-the-dom.html ，在以下部分：

Refs 和函數組件

默認情況下，您不能在函數組件上使用 ref 屬性，因為它們沒有實例：

...

但是，只要引用 DOM 元素或類組件，就可以在函數組件中使用 ref 屬性：

使用這種方法，我可以訪問我的 tabulator setData 方法。

const tableDisplay = (props) => {
  const tableRef = createRef();

  // I can now use setData in various effects:
  // if ((tableRef.current) && (tableRef.current.table)) {
  //    tableRef.current.table.setData();

  return (
      <ReactTabulator
        ref={tableRef}
        columns={columns}
        layout="fitColumns"
        data={[]}
        options={options}
      />
  );
};

這工作得很好，我只是不確定這是“干凈”的方法嗎？

Answer 2

您需要從 useEffect 和 useState 獲取 api 其結果。 這是一個例子

import React,{ useState, useEffect }from "react"
import { ReactTabulator } from "react-tabulator"

const Dashboard = props => {
    const [data,setData] = useState([])

    const getData = async () => {
        const result = await fetch("http://www.getmydata.com/now") // this is where you call the api and get its result
        setState(result.data) // this is where you set the result to your state
    }

    useEffect(()=>{
      getData()
    },[])

    const columns=[
        {
            title:"name",
            field:"name",
        },
        {
            title:"Number of Request"
            field:"noOfRequest",
        }
    ]

    return (
        <ReactTabulator
        columns={columns}
        layout="fitColumns"
        data={data} // here is the state of the table
        options={options}
        />
    )

}

export default Dashboard

這就是你從 React 中的 api 獲取數據的方式。