Javascript 在React中显示来自其他页面的数据

我在React中创建了一个可重用的表。我的问题是显示另一页的数据。 我需要获取要在

请查看此代码沙盒链接

返回(
{tableHeaders.map（（头，索引）=>(
{header}
))}
{data.map（数据=>(
{tablebody.map（body=>(
{`data.${body}`}
))}
))}
);

这是我为您提供的解决方案，它基于您的项目代码沙盒工作

//tableList.js
从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/Paper”导入纸张；
从“@物料界面/核心/表格”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableContainer”导入TableContainer；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
const useStyles=makeStyles({
根目录：{
宽度：“100%”
},
容器：{
最大高度：440
}
});
导出默认函数StickyHeadTable（{data，TableHeader，TableBody}）{
const classes=useStyles（）；
常量getProperty=（对象、属性）=>{
变量部分=项目拆分（'.'）；
if（阵列isArray（部分））{
var last=parts.pop（），
l=零件长度，
i=1，
电流=零件[0]；
而（（obj=obj[当前]）和&i(
{header}
))}
{data.map（数据=>(
{tablebody.map（body=>(
//{body}
（正文的类型==“字符串”
？{getProperty（数据，正文）}
：{body}
)
))}
))}
);
}

---

这是我为您提供的解决方案，它基于您的项目代码沙盒工作

//tableList.js
从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/Paper”导入纸张；
从“@物料界面/核心/表格”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableContainer”导入TableContainer；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
const useStyles=makeStyles({
根目录：{
宽度：“100%”
},
容器：{
最大高度：440
}
});
导出默认函数StickyHeadTable（{data，TableHeader，TableBody}）{
const classes=useStyles（）；
常量getProperty=（对象、属性）=>{
变量部分=项目拆分（'.'）；
if（阵列isArray（部分））{
var last=parts.pop（），
l=零件长度，
i=1，
电流=零件[0]；
而（（obj=obj[当前]）和&i(
{header}
))}
{data.map（数据=>(
{tablebody.map（body=>(
//{body}
（正文的类型==“字符串”
？{getProperty（数据，正文）}
：{body}
)
))}
))}
);
}

---

我添加了这个函数getProperty（param1:[]，param2:string/'items.attributes.name'），它适用于任何数组。 你只需要传递你想要它显示的结构。 例如：“products.name”、“items.attributes.name”

const getProperty=（对象，属性）=>{
变量部分=项目拆分（'.'）；
if（阵列isArray（部分））{
var last=parts.pop（），
l=零件长度，
i=1，
电流=零件[0]；
而（（obj=obj[当前]）和&i}

我添加了这个函数getProperty（param1:[]，param2:string/'items.attributes.name'），它适用于任何数组。 你只需要传递你想要它显示的结构。 例如：“products.name”、“items.attributes.name”

const getProperty=（对象，属性）=>{
变量部分=项目拆分（'.'）；
if（阵列isArray（部分））{
var last=parts.pop（），
l=零件长度，
i=1，
电流=零件[0]；
而（（obj=obj[当前]）和&i}

要使用链接，必须定义路由。 你可以在这里创建你的路线。 例子： 我创建了一个文件App.js来定义路线

//app.js
从“React”导入React，{Component}；
从“react router dom”导入{BrowserRouter，Switch，Route}；
从“/Demo”导入演示；
const LoginForm=（）=>；
const SearchComponent=（）=>；
类应用程序扩展组件{
render（）{
返回(
return (
    <Paper className={classes.root}>
      <TableContainer className={classes.container}>
        <Table stickyHeader aria-label="sticky table">
          <TableHead>
            <TableRow>
              {tableHeaders.map((header, index) => (
                <TableCell key={index}>{header}</TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {data.map(data => (
              <TableRow key={data.id}>
                {tableBodies.map(body => (
                  <TableCell key={body}>{`data.${body}`}</TableCell>
                ))}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </Paper>
  );

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Table from "@material-ui/core/Table";
import { Button, Link } from "@material-ui/core";
import VisibilityIcon from "@material-ui/icons/Visibility";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import JsxParser from "react-jsx-parser";

const useStyles = makeStyles({
  root: {
    width: "100%",
  },
  container: {
    maxHeight: 440,
  },
});

export default function StickyHeadTable({ data, tableHeaders, tableBodies }) {
  const classes = useStyles();

  return (
    <Paper className={classes.root}>
      <TableContainer className={classes.container}>
        <Table stickyHeader aria-label="sticky table">
          <TableHead>
            <TableRow>
              {tableHeaders.map((header, index) => (
                <TableCell key={index}>{header}</TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {data.map((data) => (
              <TableRow key={data.id}>
                {tableBodies.map((body, index) => (
                  <TableCell>
                    {index !== 2 ? (
                      eval(`data.${body}`)
                    ) : (
                      <JsxParser
                        components={{ Button, Link, VisibilityIcon }}
                        jsx={body}
                      />
                    )}
                  </TableCell>
                ))}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </Paper>
  );
}