通过 react router 将 prop 传递给组件
Pass prop through react router to component
我有一个组件,它是 material table。点击编辑按钮,我有这个功能:
//MaterialTable.js
...
const handleEdit = (e,Data) => {
console.log(Data)
return(<EditFunction id={Data.id} />)
...
这应该是 运行 EditFunction
组件,它接受 props.id 并通过它的 'id' 从 API 中提取数据并将其填充到用于编辑然后再次保存的自定义表单。我在那里有 console.log 来表明实际上调用了 handleEdit,它就是这样。所有匹配 'id' 的数据都打印在控制台中。
我不想直接调用函数,而是想通过 React 路由器调用它。
//Routers.js
...
<Router>
<Switch>
<Route path = '/Data/Edit' render= {props=> <Edit/>}/>
</Switch>
</Router>
...
我的目标是让 url 读取类似 localhost:3000/Data/Edit/id
的内容,其中 id 是该特定数据的 ID 号。
我不知道如何将 Link 渲染到 MaterialTable.js 文件中。我知道下面的语法是错误的,但这是我能想到的唯一方法。
//MaterialTable.js
const handleEdit = (e,Data) => {
console.log(Data)
return(id = {Data.id} component={Link} to=Data/Edit/id)
...
我想出了一个解决办法。下面列出了对文件的更改
//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)
}
/Data/Edit/:id
中的 : 调用 Edit 函数并找到道具 'id' 并将其值放入路由器中。在 MaterialTable.js 中定义了 id
并且 history.push
将路由更改为适当的 url.
我有一个组件,它是 material table。点击编辑按钮,我有这个功能:
//MaterialTable.js
...
const handleEdit = (e,Data) => {
console.log(Data)
return(<EditFunction id={Data.id} />)
...
这应该是 运行 EditFunction
组件,它接受 props.id 并通过它的 'id' 从 API 中提取数据并将其填充到用于编辑然后再次保存的自定义表单。我在那里有 console.log 来表明实际上调用了 handleEdit,它就是这样。所有匹配 'id' 的数据都打印在控制台中。
我不想直接调用函数,而是想通过 React 路由器调用它。 //Routers.js
...
<Router>
<Switch>
<Route path = '/Data/Edit' render= {props=> <Edit/>}/>
</Switch>
</Router>
...
我的目标是让 url 读取类似 localhost:3000/Data/Edit/id
的内容,其中 id 是该特定数据的 ID 号。
我不知道如何将 Link 渲染到 MaterialTable.js 文件中。我知道下面的语法是错误的,但这是我能想到的唯一方法。 //MaterialTable.js
const handleEdit = (e,Data) => {
console.log(Data)
return(id = {Data.id} component={Link} to=Data/Edit/id)
...
我想出了一个解决办法。下面列出了对文件的更改
//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)
}
/Data/Edit/:id
中的 : 调用 Edit 函数并找到道具 'id' 并将其值放入路由器中。在 MaterialTable.js 中定义了 id
并且 history.push
将路由更改为适当的 url.