使用顶级React儿童API对儿童进行映射
使用顶级React儿童API对儿童进行映射
提问于 2021-06-03 11:38:48
我试图通过将子组件映射到React来在组件中呈现这些子组件。
我不知道为什么，但孩子们没有
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函数之外呈现子元素时，它们将被呈现。
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;有人能指出我错过的方向吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-06-03 11:42:40
我想你应该把孩子送回来
{Children.map(children, (child, i) => {
<li key={i}>{child}</li>;
})}{Children.map(children, (child, i) => {
return <li key={i}>{child}</li>;
})}Stack Overflow用户
发布于 2021-06-03 12:32:12
在这里，您正在编写C (儿童的大写)，而破坏道具的c(儿童)则是小的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67820773
复制相关文章
相似问题
腾讯云开发者
