React.js中使用共享onClick函数单独定位元素的问题求助

刚学React遇到这种问题太正常啦！核心原因就是你现在用了全局单一状态来控制所有卡片的显示/隐藏，所以一点击就会触发所有卡片的状态变化。下面给你两种简单易懂的解决方案，都是React里处理这类问题的常规思路：

方案一：拆分为独立的卡片组件（推荐） #

把每个谜语卡片做成一个独立的RiddleCard组件，让每个组件自己管理自己的答案显示状态。这样每个卡片的状态都是独立的，互不影响：

import { useState } from 'react';

// 单个谜语卡片组件
function RiddleCard({ question, answer }) {
  // 每个组件自己的状态，只控制当前卡片的答案
  const [showAnswer, setShowAnswer] = useState(false);

  const toggleAnswer = () => {
    setShowAnswer(prevState => !prevState);
  };

  return (
    <div className="riddle-card">
      <p className="question">{question}</p>
      <button onClick={toggleAnswer}>
        {showAnswer ? '隐藏答案' : '显示答案'}
      </button>
      {/* 根据状态切换className控制显示隐藏 */}
      <p className={`answer ${showAnswer ? 'show' : 'hide'}`}>{answer}</p>
    </div>
  );
}

// 父页面组件
function RiddlePage() {
  // 你的谜语数据
  const riddles = [
    { question: '什么东西早上四条腿，中午两条腿，晚上三条腿？', answer: '人' },
    { question: '什么东西越洗越脏？', answer: '水' },
    { question: '什么东西有头无脚？', answer: '砖头' }
  ];

  return (
    <div className="riddle-container">
      {/* 循环渲染每个卡片组件 */}
      {riddles.map((riddle, index) => (
        <RiddleCard 
          key={index} 
          question={riddle.question} 
          answer={riddle.answer} 
        />
      ))}
    </div>
  );
}

export default RiddlePage;

方案二：在父组件中跟踪每个卡片的状态 #

如果不想拆分组件，可以用一个对象/数组来记录每个卡片的独立状态，通过卡片的唯一标识（比如id）来定位修改：

import { useState } from 'react';

function RiddlePage() {
  // 给每个谜语加一个唯一id，方便跟踪状态
  const riddles = [
    { id: 1, question: '什么东西早上四条腿，中午两条腿，晚上三条腿？', answer: '人' },
    { id: 2, question: '什么东西越洗越脏？', answer: '水' },
    { id: 3, question: '什么东西有头无脚？', answer: '砖头' }
  ];

  // 用对象存储每个id对应的显示状态，初始为空（默认都隐藏）
  const [showAnswers, setShowAnswers] = useState({});

  const toggleAnswer = (riddleId) => {
    setShowAnswers(prevState => ({
      ...prevState,
      // 切换对应id的状态：如果之前没记录，默认是false，取反就是true
      [riddleId]: !prevState[riddleId]
    }));
  };

  return (
    <div className="riddle-container">
      {riddles.map(riddle => (
        <div key={riddle.id} className="riddle-card">
          <p className="question">{riddle.question}</p>
          <button onClick={() => toggleAnswer(riddle.id)}>
            {showAnswers[riddle.id] ? '隐藏答案' : '显示答案'}
          </button>
          <p className={`answer ${showAnswers[riddle.id] ? 'show' : 'hide'}`}>
            {riddle.answer}
          </p>
        </div>
      ))}
    </div>
  );
}

export default RiddlePage;

补充你的CSS逻辑 #

确保你的CSS里有对应的显示隐藏样式，比如：

.answer.hide {
  display: none;
  /* 或者用透明度过渡：opacity: 0; transition: opacity 0.3s; */
}

.answer.show {
  display: block;
  /* opacity: 1; */
}

简单总结一下：React的状态是有作用域的，当一个状态被多个元素共享时，它的变化会影响所有依赖它的元素。所以要让每个卡片独立控制自己的状态，要么拆分组件让每个组件自己管理状态，要么在父组件里用唯一标识来跟踪每个元素的状态~

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