将 object 作为道具传递给组件

Question

我对反应非常陌生，我正试图通过乱搞来学习图书馆。

我在将 object 传递给另一个组件时遇到问题。 我创建了一个包含 2 个字符串变量、1 个 function 和 1 个 int 的对象数组。

我正在尝试在 Grid 容器（Material UI 框架）中填充它。

当我将 object 传递给另一个反应组件时，它以未定义的形式到达。 我试图通过首先将其记录到控制台来检查我是否传递了有效的 object，它是有效的。

我还尝试引用接收 object 的组件中的属性，但浏览器控制台抛出Uncaught TypeError: Cannot read properties of undefined (reading 'person') 。

有谁知道为什么它被发送为未定义？

个人列表.js：

const personListe = [
    {
        firstName:'testFirstname',
        lastName:'testLastName',
        getFullName:function()
        {
            return `${this.firstName} ${this.lastName}`
        },
        age:28
    }
]

export default function PersonList() {
    
  return (
      <>
        <Grid container spacing={3}>
            {personListe.map((person) => {
                 return(
                    <Grid item xs={3} key={person.firstName}>
                    <PersonCard person={person} />   
                    </Grid>
                )
            })}
        </Grid>
    </>
  );
}

人卡.js：

export default function PersonCard({props})
{
    return (<>
        {console.log(props)}
    </>)
}

Answer 1

PersonCard组件接收道具 object，其中包括人 object。

export default function PersonCard({person})
{
    return (
      <>
        {console.log(person)}
      </>
    )
}

或者

export default function PersonCard(props)
{
    return (
      <>
        {console.log(props.person)}
      </>
    )
}