渲染部分

Question

在我的React应用程序中，单击引导表中的一行时，我需要将值row.testid传递到后面的新标签页。

我了解到状态无法传递值。我们可以使用本地存储传递变量吗？或者，还有其他方法可以通过吗？

column1 = (cell, row) => {
    let link = `${cell}`
    return (
        <Link to={{                
          pathname: "/test/${row.testid}"      
        }} target="_blank" rel='noopener noreferrer'>
          {cell}
        </Link>
}


Renderpart
=========

return (
            <div>
         <BootstrapTable data={}>
                .......
         </BootstrapTable>
       <BrowserRouter>               
       <Route exact path="/test/:id" component={testcomp} />               
        </BrowserRouter>
       </div>
);

Answer 1

请使用反应路由器

中的 withRouter

<Link to={`/test/${row.testid}`} target="_blank" rel='noopener noreferrer' >
  {cell}
</Link>

在 testcomp 中，您可以使用 props.match.params
获得 params 请使用反应路由器作为HOC

从“反应路由器”中导入{withRouter};

使用Router（testcomp）导出默认值；

this.props.match.params.rowid

更新：

<Route exact path="/test/:id" component={testcomp} />
// path match.params.id will depends on path params of /test/:params

如果您在Route中使用 id，请使用 this.props.match.params.id 。对于前。如果使用 path =“ / test /：id”，则使用params.id ；如果使用 path =“ / test /：rowid”，则使用params.rowid

Answer 2

最后我的代码工作了，将代码更改为{{路径名：/test/${row.testid}}}
-> / test / $ {row.testid}}。

感谢您的帮助。

更新代码：

column1 =（单元格，行）=> { 让链接= ${cell} 返回（ }} target =“ _ blank” rel ='noopener noreferrer'> {细胞} }

渲染部分

返回（                                        .......

                 ）;

通过<Link>将prop中的行值传递到新选项卡

2 个答案:

渲染部分