無法顯示來自React組件的數據

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 

，但得到的錯誤：遺漏的類型錯誤：無法讀取的不確定

Answer 1

財產 '道具' 你正在使用的Stateless Function Components這樣的，而不是使用this.props，收到道具在功能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> 
    ) 
})