マッピングの小道具は、コンポーネントに渡されると定義されていません

Question

私は、オブジェクトのコレクションの周りにループするコンポーネントを持っています。私はまた、ステートレス関数を使用してコンポーネントを記述しようとしました。以下のように私のセットアップは、次のとおりです。

app.jsx

import 'babel-polyfill'; 
import React, { PropTypes } from 'react'; 
import ReactDOM from 'react-dom'; 
import Table from 'react-bootstrap/lib/Table'; 
import Headings from './intro/headings'; 
const headings = ['Last change at', 'By Author', 'Summary']; 

class Welcome extends React.Component { 
    render() { 
    const rows = this.props.data.map((row, i) => 
     <Row row={row} key={i} /> 
    ); 

    return (
     <div> 
     <Table striped bordered condensed hover> 
      <Headings headings={this.props.headings} /> 
      <tbody> 
      {rows} 
      </tbody> 
     </Table> 
     </div> 
    ); 
    } 
} 

Welcome.propTypes = { 
    data: PropTypes.arrayOf(PropTypes.object), 
    headings: PropTypes.arrayOf(PropTypes.string), 
}; 

ReactDOM.render(
    <Welcome 
    name={newPerson} 
    title="Recent Changes" 
    headings={headings} 
    data={data} 
    />, 
    document.querySelector('.container') 
); 

headings.jsx

import React, { PropTypes } from 'react'; 
import Heading from './heading'; 

const Headings = this.props.map((name, i) => 
    <Heading heading={name} key={i} /> 
); 

Headings.propTypes = { 
    heading: PropTypes.string, 
}; 

export default Headings; 

私のアプリは、私がブラウザで開きただし際、罰金コンパイルすると思われます私はクロームウェブコンソールのCannot read property 'props' of undefined(…)を入手し続ける。私はReactにはとても新しいし、ちょっと周りの自分のやり方を感じています。このステートメントで

Answer 1

：

const Headings = this.props.map((name, i) => 
    <Heading heading={name} key={i} /> 
); 

thisは、コンテキストをモジュールに参照し、何props性質を持っていません。コンポーネント内でthis.propsを呼び出すことは意味があります。

これは動作するはずです：有効な要素（またはnull）と反応 `returned`する必要があります。それは私が今取得していたと

import React, { PropTypes } from 'react'; 
import Heading from './heading'; 

const Headings = props => (
    <thead> 
    <tr> 
     { 
     props.headings.map((name, i) => 
      <Heading heading={name} key={i} /> 
     ) 
     } 
    </tr> 
</thead> 
) 

export default Headings;