ReactJS组件间传值求助：点击问题列表传递senderID至AnswerTemplate

根据你的场景，我给你两种常见的实现思路，都是基于React类组件的（因为你的代码里用了this.state和render方法）：

方案一：通过组件状态传递（适合在同一页面展示AnswerTemplate） #

这种方式是在当前组件里维护一个选中状态，点击问题时更新状态，再把状态作为props传给AnswerTemplate组件。

步骤1：初始化状态并绑定事件处理函数 #

在组件的构造函数里添加selectedSenderID状态，同时绑定点击事件的处理方法：

constructor(props) {
  super(props);
  this.state = {
    questions: [], // 假设你已经在这里初始化了问题数据
    selectedSenderID: null // 存储选中的senderID
  };
  // 绑定事件处理函数，避免每次render创建新函数
  this.handleQuestionClick = this.handleQuestionClick.bind(this);
}

步骤2：编写点击事件处理逻辑 #

实现更新选中状态的方法：

handleQuestionClick(senderID) {
  this.setState({ selectedSenderID: senderID });
}

步骤3：修改render方法，添加点击事件并传递参数 #

在渲染问题列表时，给每个列表项绑定点击事件，同时根据选中状态渲染AnswerTemplate：

render() {
  const { id: accountID } = this.props.account;
  const { questions, selectedSenderID } = this.state;
  const filteredQuestions = questions.filter(({ expID }) => expID === accountID);

  return (
    <div>
      <h1>我的问题列表</h1>
      {/* 渲染问题列表 */}
      <ul>
        {filteredQuestions.map(question => (
          <li 
            key={question.id} // 必须加唯一key，避免React警告
            onClick={() => this.handleQuestionClick(question.senderID)}
            style={{ cursor: 'pointer', padding: '8px', borderBottom: '1px solid #eee' }}
          >
            {question.description}
          </li>
        ))}
      </ul>
      {/* 只有选中问题后才渲染AnswerTemplate，并传递senderID */}
      {selectedSenderID && (
        <AnswerTemplate senderID={selectedSenderID} />
      )}
    </div>
  );
}

方案二：通过路由传递参数（适合跳转到独立的AnswerTemplate页面） #

如果你的AnswerTemplate是一个独立的路由页面，可以用React Router来传递参数：

步骤1：修改点击事件处理函数（假设用React Router v5） #

确保当前组件已经通过withRouter包裹，这样能拿到history对象：

handleQuestionClick(senderID) {
  // 跳转到AnswerTemplate的路由，并在state里携带senderID
  this.props.history.push({
    pathname: '/answer-template', // 你的AnswerTemplate路由路径
    state: { senderID: senderID }
  });
}

步骤2：在AnswerTemplate组件里获取参数 #

在AnswerTemplate组件中，通过location.state拿到传递的senderID：

class AnswerTemplate extends React.Component {
  render() {
    const { senderID } = this.props.location.state || {};
    return (
      <div>
        <h2>回答模板</h2>
        {senderID && <p>当前选中的提问者ID：{senderID}</p>}
      </div>
    );
  }
}
// 记得用withRouter包裹AnswerTemplate，才能拿到location对象
export default withRouter(AnswerTemplate);

关键注意点 #

• 绑定点击事件时，不要直接写onClick={this.handleQuestionClick(question.senderID)}，这会导致组件渲染时就执行方法，要用箭头函数或者bind来传递参数
• 列表项的key必须是唯一值，这里用question.id是最合适的选择
• 如果是函数组件，逻辑类似，只需要把this.state换成useState，this.handleQuestionClick换成useCallback包裹的函数即可

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