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

import subprocess subprocess.call(['pip3', 'install', "pandas"]) 正是通过将该 [object Object] 对象转换为字符串来呈现的内容。我会首先尝试使用 ReactDOM 来挂载该节点而不是附加：

table

渲染 React Table [v7] 导致 [object Object]

1 个答案: