javascript - 渲染 React Table [v7] 结果为 [object Object]

Question

我是 Javascript 新手，所以请多多包涵。我正在尝试在 div 中呈现数据表，但我无法这样做。基本上我只想用我们创建的表格 div 替换 html 中的 div。

我正在使用带有 webpack 的 react table 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);

Answer 1

[object Object]正是通过将该table对象转换为字符串来呈现的内容。我将首先尝试使用 ReactDOM 来挂载该节点而不是附加：

import ReactDOM from 'react-dom'
...

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