Question

我正在练习React原生。当我编译以下程序时，我无法读取Details.js的未定义错误的属性'props'。请告诉我这里出了什么问题。

Layout.js

GoTo

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

Header.js

import React from 'react';

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

Answer 1

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

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

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

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

Answer 2

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

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

它可能是你所拥有的（或任何事情）但你需要通过令人困惑的电话访问道具：

detailprop.detailprop

道具是React的惯用方法。

Answer 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。请参阅本机文档https://facebook.github.io/react-native/

ReactJS - 无法读取undefined的属性'props'

3 个答案: