首页 文章

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

提问于
浏览 次
0

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

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>
                 );
          }
 }
javascript reactjs react-native

3 回答

  • 0

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

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

    如果你知道你想要处理的道具，你可以解构那个道具：

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

    你的组件参数应该是props：

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

    它可以是你所拥有的（或任何事情）但是你需要通过令人困惑的调用来访问prop：

    detailprop.detailprop

    道具是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 . 请参考本机文档https://facebook.github.io/react-native/

    回复于

相关问题