javascript - react 组件返回 "TypeError: undefined has no properties"

Question

我的正下方有一个组件，稍后在 React 的另一个组件中使用。

代码如下:

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

问题是它没有呈现并且开发人员控制台返回以下错误:

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

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

Answer 1

你必须像这样将 props 传递给 MyComponent:

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