Reactjs 混合反应组分的反应台

我对react表是新手，所以我正在努力让示例运行。代码非常简单。 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>
    );
  }
}

类应用程序扩展组件{
render（）{
返回(
} />
);
}
}

2） ReportSalesReactTable.js-使用react表显示一些修复数据（作为测试） 从“React”导入React 从“反应表”导入反应表

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

函数ReportSalesReactTable（）{
让salesArray=[
{
姓名：“詹姆斯”，
姓：“范德沃尔特”，
vendorId:“0”，
小亭：“0”，
描述：“未知库存”，
单位：“1”，
成本价：“6”，
售价：“8”，
折扣：“0”，
销售日期时间：“2019-10-28011:53:00.000Z”
},
{
姓名：“詹姆斯”，
姓：“范德沃尔特”，
vendorId:“0”，
小亭：“0”，
描述：“气泡”，
单位：“1”，
成本价：“6”，
售价：“8”，
折扣：“0”，
销售日期时间：“2019-10-28011:53:00.000Z”
},
{
姓名：“詹姆斯”，
姓：“范德沃尔特”，
vendorId:“0”，
小亭：“0”，
描述：“未知”，
单位：“1”，
成本价格：“0.6”，
售价：“0.68”，
折扣：“0”，
销售日期时间：“2019-10-28011:53:00.000Z”
}
];
常量列=[
{
标题：“V-Id”，
附属者：“卖方”
},
{
标题：“姓名”，
访问者：“名称”
},
{
标题：“姓氏”，
访问者：“姓氏”
},
{
标题：“信息亭Id”，
访问者：“信息亭”
},
{
标题：“说明”，
访问者：“描述”
},
{
标题：“数量”，
存取器：“单位”
},
{
标题：“成本价”，
访问者：“成本价”
},
{
标题：“零售价”，
访问者：“售价”
},
{
标题：“折扣”，
访问者：“折扣”
},
{
标题：“日期”，
访问者：“saleDateTime”
}
]
返回(
)
}
导出默认ReportSalesReactTable

3） 我得到的错误是： ** 元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

检查

ReportSalesReactTable

的呈现方法。 **

我如何理解react表不希望从react组件（App.js）调用。但是，web应用程序的其余部分现在使用react组件，因此我不知道如何通过app.js->switch route语句将此react表链接到web应用程序的其余部分

如果使用React组件，您知道如何呈现React表吗

---

感谢您的帮助

您好，我无法尝试您的示例，因为它是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

从“React”导入React；
从“反应表”导入{useTable}；
从“样式化组件”导入样式化
函数ReportSalesReactTable（）{
让salesArray=[
{
姓名：“詹姆斯”，
姓：“范德沃尔特”，
vendorId:“0”，
小亭：“0”，
描述：“未知库存”，
单位：“1”，
成本价：“6”，
售价：“8”，
折扣：“0”，
销售日期时间：“2019-10-28011:53:00.000Z”
},
{
姓名：“詹姆斯”，
姓：“范德沃尔特”，
vendorId:“0”，
小亭：“0”，
描述：“气泡”，
单位：“1”，
成本价：“6”，
售价：“8”，
折扣：“0”，
销售日期时间：“2019-10-28011:53:00.000Z”
},
{
姓名：“詹姆斯”，
姓：“范德沃尔特”，
vendorId:“0”，
小亭：“0”，
描述：“未知”，
单位：“1”，
成本价格：“0.6”，
售价：“0.68”，
折扣：“0”，
销售日期时间：“2019-10-28011:53:00.000Z”
}
];
常量列=[
{
标题：“V-Id”，
附属者：“卖方”
},
{
标题：“姓名”，
访问者：“名称”
},
{
标题：“姓氏”，
访问者：“姓氏”
},
{
标题：“信息亭Id”，
访问者：“信息亭”
},
{
标题：“说明”，
访问者：“描述”
},
{
标题：“数量”，
存取器：“单位”
},
{
标题：“成本价”，
访问者：“成本价”
},
{
标题：“零售价”，
访问者：“售价”
},
{
标题：“折扣”，
访问者：“折扣”
},
{
标题：“日期”，
访问者：“saleDateTime”
}
];
const Styles=styled.div`
填充：1rem；
桌子{
边界间距：0；
边框：1px纯黑；
tr{
：最后一个孩子{
运输署{
边界底部：0；
}
}
}
th，
运输署{
保证金：0；
填充：0.5雷姆；
边框底部：1px实心blac