Question

尝试使用react组件显示道具。需要显示标签名称这样做。

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：无法读取未定义的属性'props'

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未定义，因此您的警告＆＃34; 无法读取属性＆＃39;道具＆＃39;未定义的＆＃34;。

要访问道具，只需将其添加为函数中的函数参数即可。

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

无法显示React Component的数据

2 个答案: