React Component Rückgabe "TypeError: undefined hat keine Eigenschaften"

Question

Ich habe eine Komponente direkt darunter, die später innerhalb einer anderen Komponente in reagiert wird. Hier

ist der Code:

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" 
/> 

Das Problem ist, dass es nicht zu machen, und die Entwickler-Konsole zurückgibt den folgenden Fehler:

"Typeerror: undefined hat keine Eigenschaften"

Was ist das Problem hier und wie kann ich dieses Problem beheben?

Answer 1

Sie in Requisiten passieren müssen MyComponent wie so:

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