Не удается отобразить данные из React Component

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: Не удается прочитать свойство 'реквизита' неопределенного

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> 
    ) 
})