Javascript 呈现React表[v7]会产生[object]

我是Javascript新手，所以请容忍我。我试图在div中呈现一个数据表，但我无法这样做。基本上，我只想用我们创建的表div替换html中的div

我正在使用带有Web包的react表v7。下面的代码将导致在浏览器中看到该表，该浏览器中应显示该表

这是我的密码：

import { useTable } from 'react-table';
const ReactTable = require('react-table');
import React from 'react';

const tableData = [
    {someColumn: 1, someOtherColumn: 'A'},
    {someColumn: 2, someOtherColumn: 'B'}
]

const columnGenerator = (columnNames) => {
    var updatedNames = columnNames.map(c => {
        return {
            Header: camelToTitle(c),
            accessor: c
        }
    });
    return [
    {
      Header: "Claims Data",
      columns: updatedNames
    },
  ]
};
  
const Table = ({ columns, data }) => {
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      rows,
      prepareRow
    } = useTable({
      columns,
      data
    });
  
    return (
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps()}>{column.render("Header")}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row, i) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    );
};

const table = <div>
        <Table 
            columns={columnGenerator(Object.keys(tableData[0]))} 
            data={tableData}
        />
</div>

document.getElementById('claim-table').append(table);

从'react table'导入{useTable}；
const reactable=require（'react-table'）；
从“React”导入React；
常数表数据=[
{someColumn:1，someOtherColumn:'A'}，
{someColumn:2，someOtherColumn:'B'}
]
常量columnGenerator=（columnNames）=>{
var updatedNames=columnNames.map（c=>{
返回{
标题：Camletotitle（c），
访问者：c
}
});
返回[
{
标题：“索赔数据”，
列：更新的名称
},
]
};
常量表=（{列，数据}）=>{
常数{
可获取的道具，
getTableBodyProps，
校长组，
排，
预制员
}=可用({
柱，
数据
});
返回(
{headerGroups.map（headerGroups=>(
{headerGroup.headers.map（列=>(
{column.render（“Header”）}
))}
))}
{rows.map（（row，i）=>{
准备工作（世界其他地区）；
返回(
{row.cells.map（cell=>{
返回{cell.render（“cell”）}；
})}
);
})}
);
};
常数表=
document.getElementById（'claim-table'）。append（table）；

[object object]

正是通过将

表

对象转换为字符串来呈现的。我将首先尝试使用ReactDOM装载该节点，而不是追加：

import ReactDOM from 'react-dom'
...

ReactDOM.render(<Table 
                   columns={columnGenerator(Object.keys(tableData[0]))} 
                   data={tableData}
                  />,
                 document.getElementById('claim-table')
                )

从“react dom”导入ReactDOM
...
ReactDOM.render（，
document.getElementById（'claim-table'）
)