Блог

Я сопоставляю TeamsContainer компонент и пытаюсь передать ему несколько реквизитов. Однако то, что я пробовал, похоже, не работает. Это страница, на которой вызывается компонент:

 const UserPage: NextPagelt;Propsgt; = ({ tournaments, trainerData }) =gt; {  const [leagueFilter, setLeagueFilter] = useState("");  return (  lt;gt;  lt;Navbar /gt;  lt;Select onChange={(e) =gt; setLeagueFilter(e.target.value)}gt;  lt;option value="Great"gt;Greatlt;/optiongt;  lt;option value="Ultra"gt;Ultralt;/optiongt;  lt;option value="Master"gt;Masterlt;/optiongt;  lt;/Selectgt;  {tournaments.map((tournament: Tournament, index: number) =gt; (  lt;TeamsContainer  key={tournament.bout   tournament.league}  {...tournament}  leagueFilter={leagueFilter}  /gt;  ))}  lt;/gt;  ); };  

и вот часть TeamsContainer компонента.

 import { Tournament } from "../types";  interface Props {  tournament: Tournament;  leagueFilter: string; }  const TeamsContainer: FunctionComponentlt;Propsgt; = ({ leagueFilter, ...tournament }) =gt; {   return (  lt;gt;  lt;/gt;  ); }; export default TeamsContainer;  

если я lt;Propsgt; заменю lt;Tournamentgt; и удалю leagueFilter , это сработает, но с кодом, который я использую выше, я получу ошибку Property does not exist on type '{ tournament: Tournament; children?: ReactNode; }'.ts(2339)

Я не уверен, как настроить Props интерфейс в отображаемой функции, или если это правильный способ.

Ваш существующий Props интерфейс в порядке, проблема в том, что вы используете spread и отдых без необходимости. Ваш интерфейс ожидает увидеть вызываемое свойство tournament , а не отдельные свойства, которые Tournament у него есть. Так что передайте это Tournament ( tournament={tournament} а не ...tournament ):

 {tournaments.map((tournament: Tournament, index: number) =gt; (  lt;TeamsContainer  key={tournament.bout   tournament.league}  tournament={tournament}  leagueFilter={leagueFilter}  /gt; ))}  

…и получите его без использования синтаксиса rest ( tournament вместо ...tournament ):

 const TeamsContainer: FunctionComponentlt;Propsgt; = ({ leagueFilter, tournament }) =gt; {  // ... };