REACT- 重定向 Link 不工作并在 table 上应用过滤器

Question

我的 table 显示我的菜单 (1) 的所有 ID 和标题（参见 menus.json）。我想在我的标题中添加一个 hyperlink，但它不起作用：

{
    Header: "Title",
    // accessor: "title"
    accessor: (row) => row.title,
    // Link the content of my cell. NOT WORKING 
    Cell: ({ row }) => (
      <Link to={{ pathname: `/menu/${row.id}` }}>{row.title}</Link>
    )
}

通过单击我的标题名称，ex Menu1 (1)，它会将我重定向到一个包含 table 的新页面，其中包含与我的 id_menu 相匹配的所有菜单名称（ 2).

这里是沙箱link：https://codesandbox.io/s/frosty-tree-ggwuty?

感谢您的宝贵时间。

Answer 1

Cell 似乎用于格式化值。 accessor 属性只是告诉挂钩如何访问和读取数据中的值。

Cell: Function | React.Component => JSX

Optional

Defaults to ({ value }) => String(value)

Receives the table instance and cell model as props

Must return valid JSX

This function (or component) is primarily used for formatting the column value, eg. If your column accessor returns a date object, you can use a Cell function to format that date to a readable format.

重点是我的。

使用 accessor 属性读取行值，return 使用 Cell 函数读取您要访问的值。您可以 return 整个 row 值，或者创建一个具有要用于渲染的特定属性的新对象。在 Cell 函数中访问 value 属性和 return JSX，即计算的 Link 组件。

const data = useMemo(
  () => [
    {
      Header: "Id",
      // accessor: "id"
      accessor: (row) => row.id
    },
    {
      Header: "Title",
      // accessor: "title"
      accessor: (row) => ({ title: row.title, id: row.id }),
      Cell: ({ value }) => (
        <Link to={{ pathname: `/menu/${value.id}` }}>{value.title}</Link>
      )
    }
  ],
  []
);

您还需要导入和使用路由器组件，并创建路由来渲染您想要渲染的每个不同 table（即您共享的每个视图一个 ).

为了让 existing Link 你试图使用 working 我只将 Display 组件包装在 BrowserRouter .您需要创建您真正想要将不同 table 内容呈现到其中的路由。

为您要显示的每个 table 建立路线。

示例：

应用程序

<Router>
  <Routes>
    <Route path="/menu" element={<Display />} />
    <Route path="/menu/:menuId" element={<MenuDisplay />} />
    <Route path="*" element={<Navigate to="/menu" replace />} />
  </Routes>
</Router>

菜单显示

function MenuDisplay() {
  const { menuId } = useParams();
  const { match } = JsonData;

  const matchData = match.find((el) => el._id_menu === menuId)?._ids ?? [];

  const data = useMemo(
    () => [
      {
        Header: "Name",
        accessor: (row) => row.name
      },
      {
        Header: "Description",
        accessor: (row) => row.description
      },
      {
        Header: "Dishes",
        accessor: (row) => row.dishes,
        Cell: ({ value }) => Object.values(value[0]).join(", ")
      }
    ],
    []
  );

  const initialState = {
    sortBy: [
      { desc: false, id: "id" },
      { desc: false, id: "description" },
      { desc: false, id: "dishes" }
    ]
  };

  return (
    <Table
      data={matchData}
      columns={data}
      initialState={initialState}
      withCellBorder
      withRowBorder
      withSorting
      withPagination
    />
  );
}

REACT- 重定向 Link 不工作并在 table 上应用过滤器

REACT- Redirection Link not working and applying filters on table

javascript

reactjs

json

react-hooks

data-extraction