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)} />

希望这会有所帮助。

Answer 2

我设法解决了这个问题...

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

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

function Journal(props) {

    let refTable = useRef(null);
    let table = useRef(null);

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

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

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

export default Journal;

这是问题所在。

React Hook useEffect内部对“ table”变量的分配在每次渲染后都会丢失。要随时间保留该值，请将其存储在useRef Hook中，并将可变值保留在'.current'属性中。否则，您可以直接在useEffect内部移动此变量。（反应挂钩/穷举下降）

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

2 个答案: