可以把儿童道具界面统一成单亲界面吗？

Question

我正在构建一个游戏。它有一个GameResult组件：

export default function GameResult({
  scoresData,
  onPlayAgain,
  time,
  place,
}: GameResultProps) {
  return (
    <div className="c-game-result">
      <Leaderboard scoresData={scoresData} />
      <Stats time={time} place={place} />
      <PlayAgain onClick={onPlayAgain} />
    </div>
  );

以下是其子级具有的道具接口：

• 排行榜（显示有关用户分数的数据）：

interface Props {
  scoresData: string[];
}

< li >统计数据(显示在游戏上花费的时间和占据的位置):

interface Props {
  time: string;
  place: string;
}

• 再玩一次（再玩一次的按钮）：

interface Props {
  onClick: React.MouseEventHandler<HTMLButtonElement>;
}

在父组件GameResult中，我有GameResultProps，它由所有这些接口组成：

interface GameResultProps {
  scoresData: string[];
  onPlayAgain: React.MouseEventHandler<HTMLButtonElement>;
  time: string;
  place: string;
}

我的问题是：如何将所有子接口统一到父级（GameResault）的单个道具接口中，同时为每个子接口保持单独的接口？

• 将道具界面从每个子级导入到父级，然后编写如下内容：

type GameResultProps = StatsProps & LeaderboardProps & PlayAgainProps

它工作，然而，它似乎完全无法维护。我必须跳转到三个文件才能理解GameResort应该接受什么道具。有没有办法简化它，以便我可以在父级（GameResault）中访问所有子道具类型（ScoresData、onPlay再一次、时间、地点）？

Answer 1

您可以使用类型转换：

在游戏结果组件中：

interface GameResultProps {
  scoresData: string[];
  onPlayAgain: React.MouseEventHandler<HTMLButtonElement>;
  time: string;
  place: string;
}

例如，在“统计信息”中：

type PropsStats = Pick<GameResultProps, "time" | "place">;

打字文档：实用程序类型

但是，为了简单起见，您也可以创建一个类型文件，在其中定义所有三种类型并将它们组合到GameResultProps中。就像你在帖子中所做的那样。