React-Table与React-components混合使用

Question

我是一个新的react-table，所以我正在努力让一个例子运行。代码非常简单，1) App.js--将URI链接到新的react销售报告上。

class App extends Component {
  render() {
    return (
      <div className="App">
        <Router>
          <div>
            <Navbar />
            <Switch>
              <Route exact path="/reportsales" render={() => <ReportSalesReactTable  /> } />
            </Switch>
            <Footer />
          </div>
        </Router>
      </div>
    );
  }
}

2）ReportSalesReactTable.js--使用react表来显示一些固定的数据（作为测试）import React from 'react'import ReactTable from 'react-table'

function ReportSalesReactTable() {
    let salesArray = [
        {
            name: "James",
            surname: "van der Walt",
            vendorId: "0",
            kioskId: "0",
            description: "Unknown Stock",
            units: "1",
            costPrice: "6",
            salePrice: "8",
            discount: "0",
            saleDateTime: "2019-10-28T11:53:00.000Z"
        },
        {
            name: "James",
            surname: "van der Walt",
            vendorId: "0",
            kioskId: "0",
            description: "bubbles",
            units: "1",
            costPrice: "6",
            salePrice: "8",
            discount: "0",
            saleDateTime: "2019-10-28T11:53:00.000Z"
        },
        {
            name: "James",
            surname: "van der Walt",
            vendorId: "0",
            kioskId: "0",
            description: "Unknown",
            units: "1",
            costPrice: "0.6",
            salePrice: "0.68",
            discount: "0",
            saleDateTime: "2019-10-28T11:53:00.000Z"
        }
    ];

    const columns = [
        {
            Header: "V-Id",
            accessor: "vendorId"
        },
        {
            Header: "Name",
            accessor: "name"
        },
        {
            Header: "Surname",
            accessor: "surname"
        },
        {
            Header: "Kiosk Id",
            accessor: "kioskId"
        },
        {
            Header: "Description",
            accessor: "description"
        },
        {
            Header: "Quantity",
            accessor: "units"
        },
        {
            Header: "Cost Price",
            accessor: "costPrice"
        },
        {
            Header: "Retail Price",
            accessor: "salePrice"
        },
        {
            Header: "Discount",
            accessor: "discount"
        },
        {
            Header: "Date",
            accessor: "saleDateTime"
        }
    ]
    return (
        <div>
            <ReactTable columns={columns} data={salesArray} />
        </div>
    )
}

export default ReportSalesReactTable

3) 我得到的错误是：**元素类型无效：预期是一个字符串（对于内置组件）或一个classfunction（对于复合组件），但得到了：undefined。你可能忘了从定义的文件中导出你的组件，或者你可能混淆了默认和命名的导入。

请检查 ReportSalesReactTable.**

我怎么理解react表不想从一个React组件（App.js）中调用。但是，现在web-app的其他部分使用了react组件，所以我不知道如何通过App.js->switch路由语句将这个react表链接到web-app的其他部分。

如果使用react组件，有什么办法可以渲染一个react表吗？

谢谢你的帮助

Answer 1

嗨，我不能尝试你的例子，因为它是低版本的ReactTable.但在我的环境中，我有版本的

"react-table": "^7.1.0",

请你尝试更新 react-table 版本为 7.1.0 试试下面的例子，它工作得很好。

import React from "react";
import {useTable} from "react-table";
import styled from 'styled-components'

function ReportSalesReactTable() {
    let salesArray = [
        {
            name: "James",
            surname: "van der Walt",
            vendorId: "0",
            kioskId: "0",
            description: "Unknown Stock",
            units: "1",
            costPrice: "6",
            salePrice: "8",
            discount: "0",
            saleDateTime: "2019-10-28T11:53:00.000Z"
        },
        {
            name: "James",
            surname: "van der Walt",
            vendorId: "0",
            kioskId: "0",
            description: "bubbles",
            units: "1",
            costPrice: "6",
            salePrice: "8",
            discount: "0",
            saleDateTime: "2019-10-28T11:53:00.000Z"
        },
        {
            name: "James",
            surname: "van der Walt",
            vendorId: "0",
            kioskId: "0",
            description: "Unknown",
            units: "1",
            costPrice: "0.6",
            salePrice: "0.68",
            discount: "0",
            saleDateTime: "2019-10-28T11:53:00.000Z"
        }
    ];

    const columns = [
        {
            Header: "V-Id",
            accessor: "vendorId"
        },
        {
            Header: "Name",
            accessor: "name"
        },
        {
            Header: "Surname",
            accessor: "surname"
        },
        {
            Header: "Kiosk Id",
            accessor: "kioskId"
        },
        {
            Header: "Description",
            accessor: "description"
        },
        {
            Header: "Quantity",
            accessor: "units"
        },
        {
            Header: "Cost Price",
            accessor: "costPrice"
        },
        {
            Header: "Retail Price",
            accessor: "salePrice"
        },
        {
            Header: "Discount",
            accessor: "discount"
        },
        {
            Header: "Date",
            accessor: "saleDateTime"
        }
    ];


    const Styles = styled.div`
  padding: 1rem;

  table {
    border-spacing: 0;
    border: 1px solid black;

    tr {
      :last-child {
        td {
          border-bottom: 0;
        }
      }
    }

    th,
    td {
      margin: 0;
      padding: 0.5rem;
      border-bottom: 1px solid black;
      border-right: 1px solid black;

      :last-child {
        border-right: 0;
      }
    }
  }
`;

    function 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(
                            {
                                style: {backgroundColor: row.values.tIncome > 50 ? 'skyblue' : 'lightgray'}
                            }
                        )}>
                            {row.cells.map(cell => {
                                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                            })}
                        </tr>
                    )
                })}
                </tbody>
            </table>
        )
    }

    return (
        <div>
            <Styles>
                <Table columns={columns} data={salesArray}/>
            </Styles>
        </div>
    )
}
export default ReportSalesReactTable