React组件返回“TypeError：undefined没有属性”

问题描述：

我有一个组件正好在下面，它在稍后在反应中的另一个组件中使用。React组件返回“TypeError：undefined没有属性”

下面是代码：

import React, { PropTypes } from 'react'; 

const MyComponent =() => (
    <div> 
    <div className="row"> 
     <div className="col-md-12"> 
     <div className="media"> 
      <div className="media-left media-middle"> 
      <a href="#no"><img className="media-object" src={this.props.image} alt="" /></a> 
      </div> 
      <div className="media-body"><span className="pull-right">{this.props.name}</span> 
      <h4 className="media-heading">{this.props.title}</h4> 
      {this.props.desc} 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
); 

MyComponent.propTypes = { 
    image: PropTypes.string, 
    name: PropTypes.string, 
    title: PropTypes.string, 
    desc: PropTypes.string, 
}; 

export default MyComponent; 

//Then on other component 

import React from 'react'; 
import MyComponent from './mycomponent.component'; 

<MyComponent 
    title="Title Here" 
    name="Some Name" 
    desc="Description here" 
    image="http://placehold.it/100x100" 
/>

的问题是，它没有渲染和开发者控制台返回以下错误：

“类型错误：未定义没有属性”

这里有什么问题，我该如何解决这个问题？

您需要包括'props'参数的功能和使用'props.foo'，而不是'this.props.foo'。 – Li357

它是一个'无状态的功能组件'，'this'关键字在这里面不可用，以及你需要接收'props'作为'function'参数，检查'Stateless Functional Component'上的* doc：http ：//*.com/documentation/reactjs/6588/stateless-functional-components#t=201704182033478707844 –

答

您在道具传递给MyComponent像这样：

const MyComponent = (props) => (
    console.log("example prop is", props.image); 
);

你错过了一个括号兄弟！ – cabolanoz

在这里，我想我的叛逆的方式会被忽视。缺少的括号已添加。 – Frosty619

什么都不会在*中被忽视！ – cabolanoz

React组件返回“TypeError：undefined没有属性”

相关推荐