问题描述
我是 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);
解决方法
import subprocess
subprocess.call(['pip3','install',"pandas"])
正是通过将该 [object Object]
对象转换为字符串来呈现的内容。我会首先尝试使用 ReactDOM 来挂载该节点而不是附加:
table