React.js：如何仅展开点击的列表项内容？

你当前的问题出在使用了**单个布尔值状态isOpen**来控制所有列表项的展开/折叠——这个状态是全局的，一旦切换，所有依赖它的项都会同步变化。要实现单个项独立控制，需要跟踪每个项的展开状态，下面是两种可行的修改方案：

方案一：跟踪展开项的索引 #

把状态从单个布尔值改成保存当前展开项的索引（初始为null表示没有项展开），点击时切换对应索引：

修改后的App.js代码：

import "./styles.css";
import ArticleItem from "./ArticleItem";
import { useState } from "react";

const ARTICLES = [
  {
    title: "What's SAP",
    upvotes: 1,
    date: "2019-11-21"
  },
  {
    title: "Simple text editor has 15k monthly users",
    upvotes: 7,
    date: "2010-12-31"
  }
];

export default function App() {
  // 用null表示没有展开项，保存当前展开项的索引
  const [openIndex, setOpenIndex] = useState(null);

  const toggleView = (idx) => {
    // 如果点击的是已展开的项，就关闭；否则展开该项
    setOpenIndex(prev => prev === idx ? null : idx);
  };

  return (
    <div className="App">
      {ARTICLES.map((article, idx) => (
        <div key={idx}> {/* 列表项必须添加唯一key属性 */}
          {article.title}
          <button onClick={() => toggleView(idx)}>
            <i className="fas fa-arrow-down"></i>
          </button>
          {/* 只有当前索引匹配时才渲染内容 */}
          {openIndex === idx && <ArticleItem article={article} />}
        </div>
      ))}
    </div>
  );
}

关键改动说明： #

• 状态openIndex：保存当前展开项的索引，初始值null表示无展开项
• toggleView函数：判断点击的项是否已经展开，是则关闭（设为null），否则展开（设为当前索引）
• 渲染判断：用openIndex === idx替代原来的isOpen，确保只有匹配的项才显示内容
• 添加key属性：避免React列表渲染警告

方案二：支持多项同时展开（复杂场景适用） #

如果需要允许同时展开多个项，可以把状态改成数组，跟踪每个项的独立展开状态：

export default function App() {
  // 初始化所有项为未展开状态
  const [openStates, setOpenStates] = useState(
    ARTICLES.map(() => false)
  );

  const toggleView = (idx) => {
    setOpenStates(prev => {
      const newStates = [...prev];
      newStates[idx] = !newStates[idx];
      return newStates;
    });
  };

  return (
    <div className="App">
      {ARTICLES.map((article, idx) => (
        <div key={idx}>
          {article.title}
          <button onClick={() => toggleView(idx)}>
            <i className="fas fa-arrow-down"></i>
          </button>
          {openStates[idx] && <ArticleItem article={article} />}
        </div>
      ))}
    </div>
  );
}

这个方案支持同时展开多个列表项，适合需要批量操作的场景。

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