Как передать данные от родителя к потомку с типами в React TypeScript

Question

Я использую React и Typescript в своем проекте.

в моем App.tsx

 const data = {
       navData: [
         {
          title: "A",
          id: 1
         },
         {
          title: "B",
          id: 2
         }
       ],
       otherData: [
         {
          title: "A",
          id: 1
         },
         {
          title: "B",
          id: 2
         }
       ]
    }

   <Navbar data={data} />

У меня есть данные в моем родительском компоненте, например:

Мой родительский компонент Navbar Component:

  type dataItems = {
     navData?: [];
  };

  interface NavBarProps {
    data: dataItems;
  }


  const NavBar: FC<NavBarProps> = ({ data }) => { 
         return (
            <Nav items={data} />
         )
      }

и в моем дочернем компоненте я не хочу получать эти элементы (элемент data.navData) и возвращать их с картой, например:

  const Nav: FC<NavProps> = ({}) => { 
         return (
            {items.map((item) => ( 
               <p>{item.title}</p>
            )}
      }

Не знаю, как я определил типы в родительском компоненте. И я не знаю, как в дочернем компоненте определить эти типы для их использования

Answer 1

Вот хорошее чтение. Вы можете проверить:

https://medium.com/@RupaniChirag / parent-child-communication-in- vue - angular -and-react-all-in-typescript-9a47c75cbf74