如何在 react.js 中打开表格行选择的详细视图？答案

【问题标题】：How to open detail view on table row select in react.js?如何在 react.js 中打开表格行选择的详细视图？
【发布时间】：2022-01-04 12:05:04
【问题描述】：

我有一个包含多行的表格，当我选择一行时，我想显示有关所选项目的详细信息。

我使用 react-router-dom v6 和 MUI 的材料表组件。下面是一个原型：

我利用路由在菜单项单击时切换内容。接下来是打开详细视图，但我不确定要使用什么模式。我正在考虑使用路由，例如嵌套路由，但我不知道如何将所选对象传递给详细显示对象的详细信息视图。当然有多种方法可以做到这一点，但不知道最佳做法是什么。

那么，实现这一目标的最佳做法是什么？如何实现？

更新

我可以像下面的 sn-p 那样解决我的问题。它有效，但我不太喜欢这种解决方案。


const App = () => {
  const [activeRow, setActiveRow] = useState({});
  return (
    <StrictMode>
      <Table setActiveRow={setActiveRow} />
      <Userdetails activeRow={activeRow} />
    </StrictMode>
  );
};

【问题讨论】：

能否请您补充一些您所做的努力？

标签： javascript reactjs react-router material-ui

【解决方案1】：

最好的方法是使用带有动态路径的useParams()

首先，创建动态路由路径

示例代码

<Route path="invoices" element={<Invoices />}>
      <Route path=":invoiceId" element={<Invoice />} />
</Route>

请注意：

我们刚刚创建了一个与“/invoices/2005”和
等网址匹配的路由 “/发票/1998”。路径的 :invoiceId 部分是“URL 参数”，
这意味着只要模式相同，它就可以匹配任何值

现在您可以在 <Invoice> 中以 invoiceID 为例

let params = useParams();
return <h2>Invoice: {params.invoiceId}</h2>;

更多详情您可以关注React Router V6 guide

【讨论】：

我假设参数是一个 id 或数字，可用于从基于服务器的获取正确的数据。我的情况是我已经有了数据，我只想将它传递给另一个视图。我发现的另一个解决方案是在父组件中使用 useState。查看我更新的问题。