Question

我有一个简单的表，单击行时需要链接到另一个组件。现在，表中有一列可点击的数据。有可能以简单的方式做到吗？我尝试了不同的方法来解决此任务，但似乎大多数答案已经过时了...
这就是我所拥有的：

<tbody>
            {this.state.users.map((user, id) => {
                return (                    
                    <tr key={ user.id }>
                        <td><Link to={`/user/${user.id}`}>{ user.id }</Link></td>
                        <td>{ user.first_name }</td> 
                        <td>{ user.last_name }</td> 
                        <td>{ user.email }</td>
                        <td>{ user.gender }</td>
                        <td>{ user.ip_address }</td>
                        <td>{ this.state.total_clicks[user.id] }</td>
                        <td>{ this.state.total_page_views[user.id] }</td>
                    </tr>                             
                )           
            })}
          </tbody>

这就是我想要的：

<tbody>
            {this.state.users.map((user, id) => {
                return (
                    <Link to={`/user/${user.id}`}>                  
                        <tr key={ user.id }>
                            <td>{ user.id }</td>
                            <td>{ user.first_name }</td> 
                            <td>{ user.last_name }</td> 
                            <td>{ user.email }</td>
                            <td>{ user.gender }</td>
                            <td>{ user.ip_address }</td>
                            <td>{ this.state.total_clicks[user.id] }</td>
                            <td>{ this.state.total_page_views[user.id] }</td>
                        </tr>
                    </Link>                           
                )           
            })}
          </tbody>

Answer 1

是的

但是要执行此操作，您需要在onClick组件上设置tr处理程序。这意味着页面更改只能通过编程方式完成，而不能通过链接之类的组件完成。

我假设您使用react-router-dom。为此，您需要将withRouter HOC放在桌上。然后，您可以访问history道具，该道具可以使您进行history.push('/new-url')。

将所有事物聚集在一起可以得到以下效果：

const MyComponent = ({history}) => {
  return (
    <tbody>
      {this.state.users.map((user, id) => (
        <tr key={ user.id } onClick={() => history.push(`/user/${user.id}`)}>
          /* stuff */
        </tr>                             
      )}
    </tbody>
  )
}

export default withRouter(MyComponent)

单击表行时反应<链接到...>

1 个答案: