时间戳

首页 > 解决方案 > 无法直接在子组件中访问道具

javascript - 无法直接在子组件中访问道具

问题描述

我已将数据作为 JavaScript 对象存储在文件 (details.js) 中，然后我试图将其作为道具从 MainComponent 传递给 ChildComponent。好吧，道具可以在 ChildComponent 中访问，但我可以使用它props.ChildDetails[0].name而不是props.name直接访问它，如官方文档中所示

我错过了什么？

细节.js

export const DETAILS=[
    {
        id:0,
        profile:'/assests/images/john.png',
        name:'John Doe',
    }
]

MainComponent.js

import React,{useState} from 'react';
import Child from './ChildComponent';
import {DETAILS} from '../Shared/details';
function MainComponent(){
    return(
        <>
            <Child ChildDetails={DETAILS}/>
        </>
    );
}
export default MainComponent;

ChildComponent.js

import React from 'react';
function ChildComponent(props){
    console.log(props.name) //Output:undefined
    console.log(props.ChildDetails[0].name) //Output:John Doe
    return(
        <div></div>
    );
}

export default ChildComponent;

标签： javascriptreactjsreact-props

解决方案

因为细节是对象。尝试类似：

function ChildComponent({ ChildDetails }){
    const { name } = ChildDetails[0]
    ...
}

这甚至不是 React。那是 JavaScript

编辑. 哎呀。人们说那是一个数组。我以为它只是一个对象。固定代码一点

推荐阅读