React-Table 与 React-components 混合答案

【问题标题】：React-Table mixed with React-componentsReact-Table 与 React-components 混合
【发布时间】：2020-09-14 06:38:31
【问题描述】：

我是 react-table 的新手，所以我很难让一个示例运行。代码非常简单。 1) App.js - 将 URI 链接到新的反应销售报告

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-table' 导入 ReactTable

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) 我得到的错误是： ** 元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查ReportSalesReactTable的渲染方法。 **

我如何理解不希望从 React 组件 (App.js) 调用反应表。但是，web-app 的其余部分现在使用 react 组件，所以我不知道如何通过 App.js->switch 路由语句将此 react 表链接到 web-app 的其余部分。

如果您使用 React 组件，您有什么想法如何渲染 React 表吗？

感谢您的帮助

【问题讨论】：

错误是否说明错误发生在哪一行？我不同意“不想在其他反应组件中调用 React-table”的说法——这就是它的构建目的。你导入反应表了吗？

标签： reactjs react-table

【解决方案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

【讨论】：