ReactJS中如何实现内容的独立切换/显示？

你的问题核心是所有卡片共享了同一个show状态，所以点击任意卡片都会触发全部卡片的显示/隐藏。下面提供两种更合理的实现方式：

方式1：提取独立的Card组件（推荐） #

把每个卡片封装成独立组件，让每个组件自己管理展开状态，这是React组件封装的最佳实践，代码更易维护和复用。

import { useState } from 'react';
import styles from './App.module.css';

// 独立的Card组件
function Card({ title, content }) {
  const [show, setShow] = useState(false);

  const handleToggle = () => {
    setShow(!show);
  };

  return (
    <div className={styles.card_container} onClick={handleToggle}>
      <h3>{title}</h3>
      {show && (
        <div>
          <p>{content}</p>
        </div>
      )}
    </div>
  );
}

function App() {
  const [loaded, setLoaded] = useState(true);

  return (
    <div className={styles.App}>
      {loaded && (
        <div className={styles.cards_container}>
          <Card title="Title" content="Some text" />
          <Card title="Title" content="Some text" />
          <Card title="Title" content="Some text" />
        </div>
      )}
    </div>
  );
}

export default App;

方式2：在父组件中用状态对象跟踪每个卡片的状态 #

如果需要在父组件统一管理所有卡片的展开状态，可以用一个对象来记录每个卡片的id对应的展开状态：

import { useState } from 'react';
import styles from './App.module.css';

function App() {
  const [loaded, setLoaded] = useState(true);
  // 用对象存储每个卡片的展开状态，key是卡片id，value是布尔值
  const [showStates, setShowStates] = useState({
    card1: false,
    card2: false,
    card3: false
  });

  const handleToggle = (cardId) => {
    setShowStates(prev => ({
      ...prev,
      [cardId]: !prev[cardId]
    }));
  };

  return (
    <div className={styles.App}>
      {loaded && (
        <div className={styles.cards_container}>
          <div className={styles.card_container} onClick={() => handleToggle('card1')}>
            <h3>Title</h3>
            {showStates.card1 && (
              <div>
                <p>Some text</p>
              </div>
            )}
          </div>
          <div className={styles.card_container} onClick={() => handleToggle('card2')}>
            <h3>Title</h3>
            {showStates.card2 && (
              <div>
                <p>Some text</p>
              </div>
            )}
          </div>
          <div className={styles.card_container} onClick={() => handleToggle('card3')}>
            <h3>Title</h3>
            {showStates.card3 && (
              <div>
                <p>Some text</p>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

export default App;

两种方式的适用场景 #

• 方式1适合卡片逻辑独立、不需要父组件干预的场景，代码更简洁，组件复用性强。
• 方式2适合需要在父组件对所有卡片状态做统一操作的场景（比如一键展开/收起所有卡片）。

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