React实现点击用户列表项展示对应描述的技术咨询

嘿，我来帮你搞定这个需求！其实核心思路就是用状态管理当前选中的用户，点击列表项时更新状态，然后在描述区根据选中的状态渲染内容。下面是具体的实现步骤，适配你提供的类组件代码：

1. 给组件添加「选中用户」的状态 #

首先在组件的构造函数里，给state新增一个selectedInfluencer字段，用来存储当前选中的用户对象，初始值可以设为null（或者如果需要默认选中第一个用户，就设为influencers数组的第一个元素）：

constructor(props) {
  super(props);
  this.state = {
    influencers: [], // 你的用户数据数组
    selectedInfluencer: null // 存储选中的用户
  };
  // 绑定事件处理函数（如果不用箭头函数的话）
  this.handleActive = this.handleActive.bind(this);
}

2. 完善点击事件处理函数 #

接下来写handleActive函数，当用户点击列表项时，把对应的用户对象存入状态里。这里给你两种写法，选顺手的来：

写法一：通过列表项的ID查找用户 #

适合你原来的代码结构，从DOM元素里获取ID再匹配用户：

handleActive(e) {
  // 拿到点击的列表项的ID，转成数字类型
  const influencerId = parseInt(e.currentTarget.id);
  // 从influencers数组里找到对应ID的用户
  const selected = this.state.influencers.find(inf => inf.id === influencerId);
  // 更新状态
  this.setState({ selectedInfluencer: selected });
}

写法二：直接传递用户对象（更简洁） #

修改列表项的onClick，直接把当前循环的influencer传进去，不用操作DOM：

<li 
  key={influencer.id} 
  className='influencers-list-item' 
  onClick={() => this.handleActive(influencer)}
>
  <p className='influencers-list-name'>{influencer.name}</p>
</li>

对应的事件函数就可以简化成：

// 用箭头函数定义，不用手动绑定this
handleActive = (selectedInfluencer) => {
  this.setState({ selectedInfluencer });
}

3. 在描述区渲染选中用户的内容 #

现在第二个<td>就可以根据selectedInfluencer状态来渲染对应的描述了，同时还可以给选中的列表项加个样式，方便用户看到当前选中的是谁：

<tr>
  <td className='influencers'>
    <ul className='influencers-list'>
      {this.state.influencers.map(influencer => (
        <li 
          key={influencer.id} 
          {/* 给选中的列表项加active类，方便做样式区分 */}
          className={`influencers-list-item ${this.state.selectedInfluencer?.id === influencer.id ? 'active' : ''}`} 
          onClick={() => this.handleActive(influencer)}
        >
          <p className='influencers-list-name'>{influencer.name}</p>
          {/* 你原来的其他列表项内容 */}
        </li>
      ))}
    </ul>
  </td>
  <td className='influencer-description'>
    {/* 判断是否有选中的用户，有就渲染描述，没有就提示 */}
    {this.state.selectedInfluencer ? (
      <div>
        <h3>{this.state.selectedInfluencer.name}</h3>
        <p>{this.state.selectedInfluencer.description}</p>
        {/* 这里可以加更多用户的信息，比如粉丝数、标签等等 */}
      </div>
    ) : (
      <p>请选择一个用户查看详情</p>
    )}
  </td>
</tr>

一些额外的小提示 #

• 如果你的用户数据是从接口异步获取的，记得在componentDidMount里请求数据后，顺便可以设置默认选中的用户：this.setState({ selectedInfluencer: res.data[0] })
• 代码里的?.是可选链操作符，用来避免selectedInfluencer为null时的报错，如果你的React环境不支持，可以改成this.state.selectedInfluencer && this.state.selectedInfluencer.id这种判断方式
• 可以给.active类加个背景色或者字体颜色，让选中状态更明显

内容的提问来源于stack exchange，提问作者VladislavChudak