javascript - 向映射组件传递和接收多个 props

Question

我正在映射TeamsContainer组件并尝试向其传递多个 Prop 。然而我所尝试的似乎不起作用。这是调用该组件的页面:

const UserPage: NextPage<Props> = ({ tournaments, trainerData }) => {
  const [leagueFilter, setLeagueFilter] = useState("");
  return (
    <>
      <Navbar />
        <Select onChange={(e) => setLeagueFilter(e.target.value)}>
          <option value="Great">Great</option>
          <option value="Ultra">Ultra</option>
          <option value="Master">Master</option>
        </Select>
        {tournaments.map((tournament: Tournament, index: number) => (
          <TeamsContainer
            key={tournament.bout + tournament.league}
            {...tournament}
            leagueFilter={leagueFilter}
          />
        ))}
    </>
  );
};

这是 TeamsContainer 的一部分组件。

import { Tournament } from "../types";

interface Props {
  tournament: Tournament;
  leagueFilter: string;
}

const TeamsContainer: FunctionComponent<Props> = ({ leagueFilter, ...tournament }) => {

  return (
    <>
    </>
  );
};
export default TeamsContainer;

如果我替换<Props>与 <Tournament>并删除 leagueFilter它可以工作，但是使用上面使用的代码我收到错误 Property does not exist on type '{ tournament: Tournament; children?: ReactNode; }'.ts(2339)

我不知道如何设置Props映射函数内的接口(interface)，或者如果这是解决方法。

Answer 1

您现有的Props界面很好，问题是您不必要地使用了spread和rest。您的界面期望看到一个名为 tournament 的属性，而不是 Tournament 具有的各个属性。因此，向其传递一个锦标赛(tournament={tournament} 而不是...tournament):

{tournaments.map((tournament: Tournament, index: number) => (
  <TeamsContainer
    key={tournament.bout + tournament.league}
    tournament={tournament}
    leagueFilter={leagueFilter}
  />
))}

...并且在不使用剩余语法的情况下接收它(tournament 而不是 ...tournament):

const TeamsContainer: FunctionComponent<Props> = ({ leagueFilter, tournament }) => {
    // ...
};