反応成分のデータを表示できません

Question

反応成分の表示成分を試してみてください。表示する必要がありますタブ名これを行います。

import React from 'react' 
import { Link, browserHistory } from 'react-router' 

import Tabs from '../../components/Tabs/Tabs' 

function Revenue ({ children }) { 
    return (
    <div> 
    <div> 

       <Tabs items = { ['Home', 'Services', 'About', 'Contact us'] } /> 
      </div> 
     <div className="cont-position">{children}</div> 
    </div> 

) 
} 

export default Revenue 

Tabs.js

import React from 'react' 
import { Link, browserHistory,IndexLink } from 'react-router' 

function Tabs() { 

    var data = this.props.items; 
    var newsTemplate; 
    newsTemplate = data.map(function(item, index) { 
       return (
        <div key={index}> 
         <li><Link to="/Revenue/IncomeOver" activeClassName="activelink">{item} </Link></li> 
        </div> 
       ) 
      }) 

export default Tabs 

しかし、エラーが出る：キャッチされない例外TypeError：あなたはStateless Function Componentsを使用して、その代わりにthis.propsを使用してのいるプロパティを読み取ることができません未定義

Answer 1

の '小道具' を、受信関数arg内の小道具、これを試してみてください：

function Tabs (props) { 
    var newsTemplate=[], data = props; 
    data.items.forEach(function(item, index) { 
     newsTemplate.push (
      <div key={index}> 
       <li>{item}</li> 
      </div> 
     ) 
    }); 
    return(<div>{newsTemplate}</div>); 
} 

チェック作業例えばjsfiddle：https://jsfiddle.net/4o6snef0/

チェックStateless Funcion Compの記事：あなたがステートレス機能コンポーネントとして、あなたのコンポーネントを作成しようとしているようhttps://www.reactenlightenment.com/react-state/8.4.html

Answer 2

に思えます。名前が示すように、コンポーネントはクラスとしてではなく、関数として記述されます。このため、thisは使用できません。

このように、thisは定義されていません。そのため、「は、プロパティ '小道具'の未定義」を読み取ることができません。

あなたの小道具にアクセスするには、その機能の関数パラメータとしてその小道具を追加するだけです。

function Tabs (props) { 

    var data = props.items; 
    var newsTemplate; 
    newsTemplate = data.map(function(item, index) { 
    return (
     <div key={index}> 
     <li><Link to="/Revenue/IncomeOver" activeClassName="activelink">{item} </Link></li> 
     </div> 
    ) 
})