从 parent 传递字符串以呈现多个 children

Question

我可能会在途中丢失一些东西。.我想将 object 参数传递给 children 以三种不同的方式动态渲染它。

这是我的 object:

const cards = [
        {
            imgSrc: "first",
            desc: "some text"
        },
        {
            imgSrc: "second",
            desc: "some text"
        },
        {
            imgSrc: "third",
            desc: "some text"
        }
    ];

这是 children 组件：

import { Box } from '@mui/system'
import React from 'react'

import "../../style/main.scss"

import first from "../../images/veloce.png"
import second from "../../images/sicuro.png"
import third from "../../images/vicino.png"
import { Typography } from '@mui/material'

function Card( source, text ) {
    return (
        <Box className="foundation-card">
            <img src={source}/>
            <Typography variant="h6">{text}</Typography>
            <Typography variant="body2">{text}</Typography>
        </Box>
    )
}

export default Card

然后我有 parent 组件，我想在其中渲染多个卡片映射卡片数组：

import Card from "./Card"
import CustomDivider from "../foundation/CustomDivider"

function Values() {

    return (
        <Box className="vertical-box main-maxw section-margin">
            <Typography variant="h4">Perchè sceglierci</Typography>
            <CustomDivider />
            <Box className="foundation-box values">
                {cards.map((p) => {
                    return <Card source={p.imgSrc} text={p.desc} />
                })}
            </Box>
        </Box>
    )
}

export default Values

然后我收到这个：

错误：Objects 作为 React child 无效（发现：object 键为 {}）。如果您打算渲染 children 的集合，请改用数组。

我想这是一个愚蠢的错误，但我是第一种方法，我不知道如何移动。谢谢大家

Answer 1

我认为问题在于您的卡片函数需要位置参数，但您使用对象调用它。

<Card source={p.imgSrc} text={p.desc} />
// These two things are equivalent.
Card({source: p.imgSrc, text: p.desc})

所以基本上你是在分配包含源和文本的源 arg 和对象。

尝试更改卡片功能以接受对象

function Card({source, text}) {
...
}

Answer 2

我看到了一些奇怪的东西。

1- 你在哪里映射卡片，你没有导入卡片数组，或者我看不到你从哪里得到卡片数组

2- function card 是一个 React 组件，所以你应该用 {} 包装道具，如下所示： function Card({source,text})

从 parent 传递字符串以呈现多个 children

Passing string from parent to render multiple children

javascript

arrays

reactjs

map-function