Map 以上子級 React 子級頂級 API

Question

我正在嘗試通過使用 React Children API 映射子組件來渲染組件中的子組件。

我不知道為什么，但孩子們沒有渲染

import React from "react";
import List from "components/List";

function Artists(): JSX.Element {
  return (
    <List>
      <p key={"1"}> test1</p>
      <p key={"2"}>test2</p>
      <p key={"3"}>test3</p>
      <p key={"4"}>test4</p>
      <p key={"5"}>test5</p>
    </List>
  );
}

export default Artists;

import React, { Children } from "react";
interface List {
  children: JSX.Element[] | null;
}

function List(props: List): JSX.Element {
  const { children } = props;

  return (
    <ul>
      {Children.map(children, (child, i) => {
        <li key={i}>{child}</li>;
      })}
    </ul>
  );
}

export default List;

當我在 map function 之外渲染孩子時，他們正在被渲染

import React from "react";
interface List {
  children: JSX.Element[] | null;
}

function List(props: List): JSX.Element {
  const { children } = props;

  return (
    <ul>
      <li>{children}</li>;
    </ul>
  );
}

export default List;

有人可以指出我所缺少的方向嗎？

Answer 1

我想你應該把孩子還給這里

{Children.map(children, (child, i) => {
        <li key={i}>{child}</li>;
      })}

{Children.map(children, (child, i) => {
        return <li key={i}>{child}</li>;
      })}

Answer 2

在這里你正在寫C孩子的資本同時破壞道具 c 孩子是小