时间戳

首页 > 解决方案 > 通过 react 路由器将 prop 传递给组件

javascript - 通过 react 路由器将 prop 传递给组件

问题描述

我有一个组件，它是一个材料表。点击编辑按钮，我有这个功能：

//MaterialTable.js

...
const handleEdit = (e,Data) => {
    console.log(Data)
    return(<EditFunction  id={Data.id} />)
...

这应该运行EditFunction接收 props.id 的组件，并通过它的“id”从 API 中提取数据，并将其填充到自定义表单中进行编辑，然后再次保存。我在那里有console.log，以显示实际上调用了handleEdit，就是这样。所有具有匹配“id”的数据都打印在控制台中。

我不想直接调用该函数，而是想通过反应路由器调用它。//Routers.js

...
<Router>
    <Switch>
        <Route path = '/Data/Edit' render= {props=> <Edit/>}/>
    </Switch>
</Router>
...

我的目标是让 url 读取类似的内容localhost:3000/Data/Edit/id，其中 id 是该特定数据的 ID 号。

我不知道如何在 MaterialTable.js 文件中呈现链接。我知道这个语法在下面是错误的，但这是我能想到的唯一方法。//MaterialTable.js

const handleEdit = (e,Data) => {
    console.log(Data)

    return(id = {Data.id} component={Link} to=Data/Edit/id)
...

标签： javascriptreactjsmaterial-uireact-router-dommaterial-table

解决方案

我想出了一个解决办法。以下是列出的文件更改

//Routers.js

...
<Route path = '/Data/Edit/:id' component={Edit}/>
...

//MaterialTable.js

const handleEdit = (e,Data) => {
    const id = Data.id
    let idUrl = '/Data/Edit/' + id
    props.history.push(idUrl)
  }

: in/Data/Edit/:id调用 Edit 函数并找到 prop 'id' 并将其值放在路由器中。在 MaterialTable.js 中，它id被定义并将history.push路由更改为适当的 url。

推荐阅读