ReactJS - 无法读取未定义的属性“道具”答案

【问题标题】：ReactJS - cannot read property 'props' of undefinedReactJS - 无法读取未定义的属性“道具”
【发布时间】：2017-03-30 18:37:39
【问题描述】：

我正在练习 React Native。当我编译以下程序时，我收到无法读取 Details.js 的未定义错误的属性“道具”。请让我知道这里出了什么问题。

布局.js

import React, {Component} from 'react';
import Header from './Header';
import Details from './Details';

export default class Layout extends React.Component {
constructor(props){
  super(props);
    this.state = {
                     heading: "Welcome no-name guy!",
                     header: "I am your header",
                     footer: "I am your footer"
                 };
               }

render() {
   return (
           <div>
            <Header headerprop={this.state.header} />
            <Details detailprop={this.state.heading} />
          </div>
          );
         }
}

Details.js

import React from 'react';

const Details = (detailprop) => {
 return (
  <div className="heading-style">{this.props.detailprop}</div>
 );
 };
Details.bind(this);
export default Details;

Header.js

import React, {Component} from 'react';

export default class Header extends React.Component {
 render(){
           return(
                   <div>{this.props.headerprop}</div>
                 );
          }
 }

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

在功能组件中，props 作为第一个参数传递。所以，你只需要这样做：

const Details = (props) => {
    return (
        <div className="heading-style">{props.detailprop}</div>
    );
};

如果您知道要处理的道具，您可以解构该道具：

const Details = ({ detailProp }) => {
    return (
        <div className="heading-style">{detailprop}</div>
    );
};

【讨论】：

【解决方案2】：

你的组件参数应该是道具：

const Details = (props) => {
 return (
  <div className="heading-style">{props.detailprop}</div>
 );
 };

它可能是你所拥有的 detailprop（或任何与此相关的东西），但你需要通过令人困惑的调用来访问 prop：

detailprop.detailprop

props 是 React 的惯用方法。

【讨论】：

【解决方案3】：

Details.js 是一个无状态的函数式反应组件。 https://facebook.github.io/react/docs/components-and-props.html

它接收props 作为它的参数。您在这里不需要this。

import React from 'react';

const Details = (props) => {
 return (
  <div className="heading-style">{props.detailprop}</div>
 );
 };
Details.bind(this); // you don't need this
export default Details;

此外，div 元素不适用于 react-native。请参考 react native 文档https://facebook.github.io/react-native/

【讨论】：