reactjs - 为什么这种语法对我试图创建的组件的箭头函数语法有效？

Question

我正在关注 youtube 上的简短教程，我有一个问题是，为什么在创建我的组件时这种语法有效：

function List<ListItem>({
  items,
  render,
}: {
  items: ListItem[];
  render: (item: ListItem) => ReactNode;
}) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{render(item)}</li>
      ))}
    </ul>
  );
}

我更喜欢箭头函数，我试过这样写：

const List<ListItem> = ({
  items, 
  render
}: {
  items: ListItem[],
  render: (item: ListItem) => ReactNode
}) => {
  return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>
        {render(item)}
      </li>
    ))}
  </ul>
  )
}

我在 vs 代码中收到此消息：

JSX 元素“ListItem”没有相应的结束标记

标签： reactjstypescript