React中的制表符-TypeError：无法读取未定义的属性'tagName'

Question

我收到此错误...

  5440 | this.bindModules();
  5441 | 
> 5442 | if (this.element.tagName === "TABLE") {
       | ^  5443 |   if (this.modExists("htmlTableImport", true)) {
  5444 |     this.modules.htmlTableImport.parseTable();
  5445 |   }

[当我尝试使用Tabulator library in a React component时。

import React, { useState, useEffect } from "react";

import Tabulator from "tabulator-tables";
import "tabulator-tables/dist/css/tabulator.min.css";

function Journal(props) {

    let refTable = React.createRef();

    const [journalItems, setJournalItems] = useState([]);

    useEffect(() => {
        new Tabulator(refTable, {
            data: journalItems,
            reactiveData: true,
            columns: ["a", "b", "c"],
        });
    }, []); 

    return (
        <div>
            <div className="foo" ref={refTable}></div>
        </div >
    )
}

export default Journal;

library example使用类组件方法，而我想使用函数式方法。

我做错了什么？

Answer 1

我已在此解决问题-https://codesandbox.io/s/gallant-wright-365ur。

createRef应该在功能组件中使用。参考-What's the difference between `useRef` and `createRef`?

仅需要更改-->

<div className="foo" ref={el => (refTable = el)} />
希望这会有所帮助。