React组件onClick优化：实现列表项独立触发子组件展示

嘿，我懂你遇到的这个问题——点击列表里任意一个艺人，所有的详情组件都跟着弹出来，这肯定不是你想要的效果。其实根源很简单：你大概率是用了一个共享的布尔状态（比如isExpanded）来控制所有项的展开/收起，这个状态一变，所有绑定它的组件都会跟着切换显示状态。

下面给你两种最常用的解决方案，按需选就行：

方案1：把列表项拆成独立子组件（推荐） #

这种方法最符合React的组件拆分思想，每个艺人项自己管理自己的展开状态，互相完全独立。

步骤： #

1. 新建一个ArtistItem子组件，把单个艺人的展示逻辑和展开状态都放在这里：

function ArtistItem({ artist }) {
  // 每个子组件自己维护展开状态
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div className="artist-item" onClick={() => setIsExpanded(!isExpanded)}>
      {/* 这里放艺人的基础信息，比如头像、名字 */}
      <div className="artist-basic">
        <img src={artist.avatar} alt={artist.name} />
        <h3>{artist.name}</h3>
      </div>
      {/* 只有当前项展开时才显示详情 */}
      {isExpanded && <ArtistDetails artist={artist} />}
    </div>
  );
}

2. 在父组件里直接渲染这个子组件，不用再管展开状态了：

function ArtistList() {
  const [artists, setArtists] = useState([]);

  // 这里写你的API请求逻辑，获取艺人数据
  useEffect(() => {
    fetch('/api/artists')
      .then(res => res.json())
      .then(data => setArtists(data));
  }, []);

  return (
    <div className="artist-list">
      {artists.map(artist => (
        // 记得用艺人的唯一ID作为key，别用索引！
        <ArtistItem key={artist.id} artist={artist} />
      ))}
    </div>
  );
}

方案2：在父组件中维护当前展开的艺人ID #

如果不想拆分子组件，也可以在父组件里用艺人的唯一ID来控制单个项的展开，而不是用布尔值。

代码示例： #

function ArtistList() {
  const [artists, setArtists] = useState([]);
  // 存储当前展开的艺人ID，初始为null表示没有展开的项
  const [expandedArtistId, setExpandedArtistId] = useState(null);

  // API请求逻辑...
  useEffect(() => {
    fetch('/api/artists')
      .then(res => res.json())
      .then(data => setArtists(data));
  }, []);

  // 处理点击事件：如果点击的是当前展开的艺人，就关闭；否则展开它
  const toggleArtistDetails = (artistId) => {
    setExpandedArtistId(prevId => prevId === artistId ? null : artistId);
  };

  return (
    <div className="artist-list">
      {artists.map(artist => (
        <div 
          key={artist.id} 
          className="artist-item"
          onClick={() => toggleArtistDetails(artist.id)}
        >
          {/* 艺人基础信息 */}
          <div className="artist-basic">
            <img src={artist.avatar} alt={artist.name} />
            <h3>{artist.name}</h3>
          </div>
          {/* 只有当前艺人ID和expandedArtistId匹配时，才显示详情 */}
          {expandedArtistId === artist.id && <ArtistDetails artist={artist} />}
        </div>
      ))}
    </div>
  );
}

额外需求：支持同时展开多个艺人 #

如果想让用户可以同时展开多个艺人的详情，只需要把状态改成数组，存储所有展开的艺人ID就行：

function ArtistList() {
  const [artists, setArtists] = useState([]);
  const [expandedArtistIds, setExpandedArtistIds] = useState([]);

  const toggleArtistDetails = (artistId) => {
    setExpandedArtistIds(prevIds => {
      if (prevIds.includes(artistId)) {
        // 移除ID，关闭当前艺人的详情
        return prevIds.filter(id => id !== artistId);
      } else {
        // 添加ID，展开当前艺人的详情
        return [...prevIds, artistId];
      }
    });
  };

  return (
    <div className="artist-list">
      {artists.map(artist => (
        <div 
          key={artist.id} 
          className="artist-item"
          onClick={() => toggleArtistDetails(artist.id)}
        >
          {/* 艺人基础信息 */}
          <div className="artist-basic">
            <img src={artist.avatar} alt={artist.name} />
            <h3>{artist.name}</h3>
          </div>
          {/* 判断当前艺人ID是否在展开数组里 */}
          {expandedArtistIds.includes(artist.id) && <ArtistDetails artist={artist} />}
        </div>
      ))}
    </div>
  );
}

不管用哪种方法，核心都是让每个艺人项的展开状态和自身绑定，而不是用全局共享的状态，这样点击单个项就只会影响它自己的详情显示啦。

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