React中如何在组件间传递变量值？Card与Score组件传值需求

你的问题核心是组件局部状态无法跨组件访问，Card组件里的score是它自己的局部状态，Score组件自然拿不到。解决方法是用React的状态提升，把共享状态放到两个组件的共同父组件中，再通过props传递给子组件。

步骤1：创建共同父组件 #

新建一个父组件（比如Game.js），把score状态和分数更新逻辑放在这里：

import { useState } from 'react';
import Card from './Card';
import Score from './Score';

const Game = () => {
  const [score, setScore] = useState(0);

  // 修正分数更新逻辑：用函数式更新获取最新状态
  const incrementScore = () => {
    setScore(prevScore => {
      return prevScore >= 8 ? 0 : prevScore + 1;
    });
  };

  return (
    <div className="game-container">
      {/* 把分数更新方法传给Card */}
      <Card incrementScore={incrementScore} />
      {/* 把score传给Score */}
      <Score score={score} />
    </div>
  );
};

export default Game;

步骤2：修改Card组件 #

移除Card里的局部score状态，通过props接收父组件传来的incrementScore方法：

const Card = ({ incrementScore }) => {
  // 点击图片触发分数更新
  const handleImageClick = () => {
    incrementScore();
  };

  return (
    <div>
      <img src="your-image-url" onClick={handleImageClick} alt="clickable-card" />
    </div>
  );
};

export default Card;

步骤3：修改Score组件 #

通过props接收父组件传来的score，直接渲染即可：

const Score = ({ score }) => {
  return (
    <div>
      <p>{`Score: ${score}`}</p>
    </div>
  );
};

export default Score;

关键说明 #

• 原incrementScore逻辑存在问题：setScore是异步操作，直接用score判断会拿到旧值，改用函数式更新setScore(prevScore => ...)才能获取最新状态值。
• 状态提升是React中组件间共享状态的标准方案，适合这种兄弟组件需要共享数据的场景。

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