在 React 中调用制表符 table 函数

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");

由于我无法直接访问 'table' 对象的等价物，因此如何将其转换为 React 世界（在挂钩环境中）？我是否需要使用 getElementById 或类似的东西来访问我的制表符对象？

Answer 1

您需要从 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 获取数据的方式。

Answer 2

我认为解决方案是使用此处所述的 ref： https://reactjs.org/docs/refs-and-the-dom.html , 在部分中:

Refs and Function Components

By default, you may not use the ref attribute on function components because they don’t have instances:

...

You can, however, use the ref attribute inside a function component as long as you refer to a DOM element or a class component:

使用这种方法，我可以访问我的制表符 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}
      />
  );
};

这很好用，我只是不确定这是 "clean" 的方法吗？

在 React 中调用制表符 table 函数

Calling a tabulator table function in React

javascript

reactjs

tabulator

react-hooks