Question

ReactJS-无法读取未定义的属性“props”

2017-03-30

10664

javascript reactjs react-native

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

Layout.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>
                 );
          }
 }

Answer 1

在函数式组件中，props 作为第一个参数传递。因此，您只需执行以下操作：

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

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

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

Answer 2

您的组件参数应该是 props：

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

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

detailprop.detailprop

props 是 React 的惯用方法。

Answer 3

Details.js 是一个无状态函数式 React 组件。 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/