如何从React BracketMatchup组件返回预测胜者数据供其他组件使用？

我正在开发一款基于数据自动生成对阵图（bracket）的应用。目前有一个React组件BracketMatchup，用于展示两支队伍的对阵信息，该组件可以计算出比赛的预测胜者，但需要在应用的其他组件中获取这个预测胜者数据。

当前BracketMatchup组件实现：

export const BracketMatchup = ({ highseed, lowseed, round }) => {
  return (
    <div
      className={style.bracketMatchup}
      style={{ height: `calc(75px * ${round})` }}
    >
      <div className={style.highSeed}>{highseed?.name}</div>
      <div className={style.lowSeed}>{lowseed?.name}</div>
    </div>
  );
};

组件接收highseed、lowseed和round参数，仅展示对阵信息。组装应用时堆叠多个实例：

<div className={styles.bracket}>
  <div className={styles.bracketColumn}>
    <BracketMatchup
      highseed={getTeam("Kansas")}
      lowseed={getTeam("ISU")}
      round={1}
      id="1"
    />
    <BracketMatchup
      highseed={getTeam("TCU")}
      lowseed={getTeam("BYU")}
      round={1}
      id="2"
    />
  </div>
  <div
    className={styles.bracketColumn}
    style={{ marginTop: "calc(75px / 2)" }}
  >
    <BracketMatchup round={2} id="3"/>
  </div>
</div>

现在的问题是：id为3的BracketMatchup组件需要使用前两个组件的预测胜者作为输入，但不清楚如何从BracketMatchup组件中返回该数据。

1. 通过回调函数传递数据（父子组件通信） #

React遵循单向数据流，子组件要向父组件传递数据，需要父组件传入回调函数，子组件计算出胜者后调用该函数把数据回传。

步骤1：改造BracketMatchup组件，添加回调属性 #

import { useEffect } from 'react';

export const BracketMatchup = ({ highseed, lowseed, round, onWinnerDetermined }) => {
  // 替换成你的实际预测胜者逻辑
  const determineWinner = () => {
    return highseed?.seed < lowseed?.seed ? highseed : lowseed;
  };

  // 当参赛队伍数据变化时，计算胜者并通知父组件
  useEffect(() => {
    if (highseed && lowseed) {
      const winner = determineWinner();
      onWinnerDetermined(winner);
    }
  }, [highseed, lowseed, onWinnerDetermined]);

  return (
    <div
      className={style.bracketMatchup}
      style={{ height: `calc(75px * ${round})` }}
    >
      <div className={style.highSeed}>{highseed?.name}</div>
      <div className={style.lowSeed}>{lowseed?.name}</div>
      {/* 可选：显示预测胜者 */}
      {highseed && lowseed && <div className={style.winner}>预测胜者：{determineWinner().name}</div>}
    </div>
  );
};

步骤2：父组件维护状态，接收子组件的胜者数据 #

import { useState } from 'react';

const BracketContainer = () => {
  const [match1Winner, setMatch1Winner] = useState(null);
  const [match2Winner, setMatch2Winner] = useState(null);

  return (
    <div className={styles.bracket}>
      <div className={styles.bracketColumn}>
        <BracketMatchup
          highseed={getTeam("Kansas")}
          lowseed={getTeam("ISU")}
          round={1}
          id="1"
          onWinnerDetermined={setMatch1Winner}
        />
        <BracketMatchup
          highseed={getTeam("TCU")}
          lowseed={getTeam("BYU")}
          round={1}
          id="2"
          onWinnerDetermined={setMatch2Winner}
        />
      </div>
      <div
        className={styles.bracketColumn}
        style={{ marginTop: "calc(75px / 2)" }}
      >
        {/* 两个胜者确定后，传递给第三场比赛 */}
        <BracketMatchup 
          round={2} 
          id="3"
          highseed={match1Winner}
          lowseed={match2Winner}
        />
      </div>
    </div>
  );
};

2. 使用状态管理工具（复杂场景） #

如果对阵图层级深、组件结构复杂，或需要跨组件共享胜者数据，可以用React Context、Zustand或Redux这类工具统一管理全局状态。

示例（React Context） #

1. 创建对阵数据Context：

import { createContext, useContext, useState } from 'react';

const BracketContext = createContext();

export const BracketProvider = ({ children }) => {
  const [matchWinners, setMatchWinners] = useState({});

  // 更新指定场次的胜者
  const updateMatchWinner = (matchId, winner) => {
    setMatchWinners(prev => ({ ...prev, [matchId]: winner }));
  };

  return (
    <BracketContext.Provider value={{ matchWinners, updateMatchWinner }}>
      {children}
    </BracketContext.Provider>
  );
};

// 自定义Hook简化Context调用
export const useBracket = () => useContext(BracketContext);

2. 修改BracketMatchup组件使用Context：

import { useEffect } from 'react';
import { useBracket } from './BracketContext';

export const BracketMatchup = ({ highseed, lowseed, round, id }) => {
  const { updateMatchWinner, matchWinners } = useBracket();

  const determineWinner = () => {
    return highseed?.seed < lowseed?.seed ? highseed : lowseed;
  };

  useEffect(() => {
    if (highseed && lowseed) {
      const winner = determineWinner();
      updateMatchWinner(id, winner);
    }
  }, [highseed, lowseed, id, updateMatchWinner]);

  // 根据场次ID获取前序比赛的胜者（示例中id3对应id1和id2的胜者）
  const getPreviousWinners = () => {
    if (id === "3") {
      return {
        highseed: matchWinners["1"],
        lowseed: matchWinners["2"]
      };
    }
    return { highseed, lowseed };
  };

  const { highseed: currentHigh, lowseed: currentLow } = getPreviousWinners();

  return (
    <div
      className={style.bracketMatchup}
      style={{ height: `calc(75px * ${round})` }}
    >
      <div className={style.highSeed}>{currentHigh?.name}</div>
      <div className={style.lowSeed}>{currentLow?.name}</div>
    </div>
  );
};

3. 根组件包裹BracketProvider：

import { BracketProvider } from './BracketContext';

function App() {
  return (
    <BracketProvider>
      <BracketContainer />
    </BracketProvider>
  );
}

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