使用顶级 React Children API 映射 children

Question

我正在尝试通过使用 React Children API.

映射 children 来在组件中呈现 children

我不明白为什么 children 不是 renderen

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;

当我在地图函数之外渲染 children 时，它们正在被渲染

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

我想你应该 return child 这里

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

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

Answer 2

这里你写的是 C children 的 capital 而 destructuring props c of children 是 small

使用顶级 React Children API 映射 children

Map over children with top level React Children API

javascript

arrays

children

reactjs