React JS - 如何访问从父组件传递的子组件中的道具

Question

在我的反应应用程序中，我将我的数据作为道具从父母传递给孩子。在我的子组件中，我可以看到 props 中的数据，但是当我尝试访问数据时，我收到一条错误消息，提示“无法读取未定义的属性”。

我已经编写了如下所示的子组件-

子组件-

import React from 'react';
import ReactDOM from 'react-dom';
import { setData } from '../actions/action'
import { connect } from 'react-redux'

import {
    Accordion,
    AccordionItem,
    AccordionItemTitle,
    AccordionItemBody,
} from 'react-accessible-accordion';


import 'react-accessible-accordion/dist/fancy-example.css';
import 'react-accessible-accordion/dist/minimal-example.css';

const ChildAccordion = (props) => {
    console.log(props);

    return (
        <Accordion>
            <AccordionItem>
                <AccordionItemTitle>
                <h3> Details: 
               { props?
                    props.map(d =>{
                        return <span>{d.key}</span>
                    })
                    :
                    ""
               }

                </h3>
                    <div>With a bit of description</div>
                </AccordionItemTitle>
                <AccordionItemBody>
                    <p>Body content</p>
                </AccordionItemBody>
            </AccordionItem>
        </Accordion>
    )
};



export default  ChildAccordion

父组件-

import React from 'react';
import ReactDOM from 'react-dom';
import ChildAccordion from './ChildAccordion'
import { setData } from '../actions/action'
import { connect } from 'react-redux'

import {
    Accordion,
    AccordionItem,
    AccordionItemTitle,
    AccordionItemBody,
} from 'react-accessible-accordion';


import 'react-accessible-accordion/dist/fancy-example.css';
import 'react-accessible-accordion/dist/minimal-example.css';


class ParentAccordion extends React.Component {

    componentWillMount() {
      //call to action
      this.props.setData();
  }

  getMappedData = (dataProp) =>{
      if (dataProp) { 
        let Data = this.props.dataProp.map(d =>{
            console.log(d);
        })
      }
  }


    render(){
        const { dataProp } = this.props;
        return (
            // RENDER THE COMPONENT
                <Accordion>
        <AccordionItem>
            <AccordionItemTitle>
                <h3>Policy Owner Details: 
               { dataProp?
                    dataProp.map(d =>{
                        return <span>{d.key1}</span>
                    })
                    :
                    ""
               }

                </h3>
            </AccordionItemTitle>
            <AccordionItemBody>
            <ChildAccordion {...dataProp} />
            </AccordionItemBody>
        </AccordionItem>
    </Accordion>
        );
    }
}


const mapStateToProps = state => {
    return {
        dataProp: state.dataProp
    }
};

const mapDispatchToProps = dispatch => ({
  setData(data) {
    dispatch(setData(data));
  }
})
export default connect (mapStateToProps,mapDispatchToProps) (ParentAccordion)

我在内部使用 map 函数，因为我的 api 响应可以是多个对象的数组。

Answer 1

一旦你知道你传入的 prop 被称为什么，你就可以像这样在你的子组件中访问它：{props.data.map(item => <span>{item.something}</span>}

const Parent = () => {
  return (
     <Child data={[{ id: 1, name: 'Jim' }, { id: 2, name: 'Jane ' }]} />
  );
}

const Child = (props) => {
  return (
    <ul>
      {props.data.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

Answer 2

您正在将 dataProp 作为道具传递给 ChilAccordian。因此，在子组件中，您应该使用 props.dataProp 访问它并在 props.dataProp 上进行映射，而不是直接在 props 上进行映射

儿童手风琴：

  <h3> Details: 
           { Array.isArray(props.dataProp) && props.dataProp.length > 0 ?
                props.dataProp.map(d =>{
                    return <span key={d.id}>{d.key}</span>
                })
                :
                ""
           }

            </h3>

还请记住，当您在循环中生成它们时，您必须向父 Jsx 元素添加唯一键，例如 for loop、.map、.forEach、Object.keys、OBject.entries、Object.values 等，就像我在上面的例子。如果您没有从数据中获得唯一 ID，请考虑将索引添加为唯一的，例如

      <h3> Details: 
           { Array.isArray(props.dataProp) && props.dataProp.length > 0 ?
                props.dataProp.map((d, index) =>{
                    return <span key={"Key-"+index}>{d.key}</span>
                })
                :
                ""
           }

            </h3>

编辑：如果它是一个对象，则执行以下操作并使用方法生成 jsx 元素

getMappedData = dataProp =>{
   if(props.dataProp){
            Object.keys(props.dataProp).map(key =>{
               return <span key={"Key-"+key}>{props.dataProp[key]}</span>
            });
   }else{
       return "";
    }
  }

   <h3> Details: 
          {this.getMappedData(props.dataProp)} 
   </h3>