如何在ReactJS中实现列表项点击跳转至指定组件

嘿，我来帮你搞定这个列表项跳转的需求！从你的代码来看，你应该是在React项目里开发，结合React Router就能轻松实现点击列表项跳转到/Answers/[被点击项ID]的功能，下面给你两种常用的实现方式：

方式一：使用Link组件（推荐，声明式路由） #

这是React Router官方推荐的方式，属于声明式导航，代码更简洁规范，也符合路由的设计理念。

步骤： #

1. 确保你已经安装了react-router-dom，并在项目中完成了基础路由配置。
2. 在你的组件中导入Link组件：

import { Link } from 'react-router-dom';

3. 修改你的map遍历代码，把列表项包裹在Link中，同时修正key的问题（原来的布尔值key会导致重复，建议用每个question的唯一标识，比如question.id）：

render() {
  const quesItems = this.state.questions.map((question) => {
    return (
      <Link 
        key={question.id} 
        to={`/Answers/${question.id}`}
        style={{ textDecoration: 'none', color: 'inherit' }} // 可选：去掉链接默认的下划线和颜色变化
      >
        <li>{question.description} {question.senderID}</li>
      </Link>
    );
  });

  return (
    <div>
      <ul>{quesItems}</ul>
      {/* 你的其他页面内容 */}
    </div>
  );
}

方式二：使用history.push（命令式，适合需要额外逻辑的场景） #

如果你需要在点击列表项时执行一些额外操作（比如埋点统计、数据校验），可以用这种命令式的导航方式。

步骤： #

1. 确保你的组件能获取到history对象：
   • 如果你的组件是直接被Route组件渲染的（比如<Route path="/Answers" component={YourComponent} />），组件会自动接收history、location、match这三个props。
   • 如果不是，需要用withRouter高阶组件包裹你的组件：

     import { withRouter } from 'react-router-dom';
     
     // 你的组件定义...
     
     export default withRouter(YourComponent);
     

2. 修改列表项的点击事件：

render() {
  const quesItems = this.state.questions.map((question) => {
    return (
      <li 
        key={question.id}
        onClick={() => {
          // 这里可以添加额外逻辑，比如埋点、数据预处理
          console.log('点击了问题:', question.description);
          // 执行跳转
          this.props.history.push(`/Answers/${question.id}`);
        }}
        style={{ cursor: 'pointer' }} // 可选：添加鼠标指针样式，提示用户可点击
      >
        {question.description} {question.senderID}
      </li>
    );
  });

  return (
    <div>
      <ul>{quesItems}</ul>
      {/* 你的其他页面内容 */}
    </div>
  );
}

最后别忘了配置动态路由 #

无论用哪种方式，你都需要在路由配置文件中添加对应的动态路由规则，这样跳转后才能渲染对应的详情组件：

import { Switch, Route } from 'react-router-dom';
import Answers from './Answers'; // 你的列表页组件
import AnswerDetail from './AnswerDetail'; // 问题详情组件

function App() {
  return (
    <Switch>
      {/* 动态路由，:questionId是占位符，会匹配具体的ID值 */}
      <Route path="/Answers/:questionId" component={AnswerDetail} />
      <Route path="/Answers" component={Answers} />
      {/* 其他路由规则 */}
    </Switch>
  );
}

在详情组件中，你可以通过this.props.match.params.questionId获取到跳转过来的ID，从而加载对应的数据。

内容的提问来源于stack exchange，提问作者M.A.G