Question

我有一个带有一些值的JSON文件，我可以通过映射将该值显示给我的组件。

我的json：

[{
    "id": 1,
    "Name": "Nandhini",
}]

示例：

import Namedata from "./data/namedata";

{
    Namedata.map((user) => {
        return (
            <Card>
                <Meta name={user.Name} />
            </Card>
        )
    })
}

我想将这些数据作为道具传递给子组件。如何实现这一目标？

示例父组件（我需要从中传递值）：

import Namedata from "./data/namedata";

<div>
 <UserNameComponent Name={Namedata}/>
</div>

子组件示例：

我知道这是错误的，需要解决方案才能在此处调用该值！

 {
        this.props.Namedata.map((user) => {
            return (
                <Card>
                    <Meta name={user.Name} />
                </Card>
            )
        })
    }

Answer 1

您已经接近。除了一件事，一切似乎都正确。当您访问从Parent收到的道具时，您应该将传递的名称作为属性来引用。在这种情况下，名称，而不是名称数据。

因此这应该起作用。

{
this.props.Name.map((user) => {
   return (
       <Card>
           <Meta name={user.Name} />
       </Card>
   )
    })
}

Answer 2

您在子组件Namedata中以Name的身分通过了UserNameComponent。因此，请尝试从子级访问Name而不是NameData

 {
        this.props.Name.map((user) => {
            return (
                <Card>
                    <Meta name={user.Name} />
                </Card>
            )
        })
    }

将值作为道具从JSON传递到子组件

2 个答案: