Question

我有一个功能组件，该组件接收数据数组并将其映射到节点数组（缩写代码）：

const TemplateLinkCardList = ({ templates }: TemplateLinkCardListProps ) => {

    const cardFromData = (templateData: TemplateData) => {
        return (
            <TemplateCard {...templateData} />
        )
    }   

    return templates.map(cardFromData)
}

但是当我尝试将其连接到redux时：

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(TemplateLinkCardList)

我得到一个错误：

错误：（21，3）TS2345：类型'（{{template，toggleFavourited，onClickSideEffects，cardVariant，color，}：TemplateLinkCardListProps）=> JSX.Element []'无法分配给类型'ComponentType'的参数


类型'（{{模板，toggleFavourited，onClickSideEffects，cardVariant，颜色，}：TemplateLinkCardListProps）=> JSX.Element []'不可分配给'FunctionComponent'类型。


类型'Element []'缺少类型'ReactElement ReactElement Component）的以下属性null）| （新（道具：任意）=>组件）>'：类型，道具，键

将返回的内容包装在一个片段中可解决以下错误：
<>{return templates.map(cardFromData)}</>代替return templates.map(cardFromData)

我的原始代码有什么问题？如何连接返回节点数组的组件？

Answer 1

在react中，return应该只包装在一个标签内，并且map在没有父级的情况下创建多个同级，因此会出错。

片段

React中的常见模式是组件返回多个元素。片段使您可以将子级列表分组，而无需在DOM中添加额外的节点。

检出此沙盒https://codesandbox.io/s/lively-fast-x95ec

我在这里使用地图。如果您不将其包装在div中，则它不起作用，也尝试其他情况。

尝试连接返回节点数组的组件时发生错误

1 个答案: