javascript - array.map 在reactjs 中不起作用

Question

我的阵列tabList未映射到 <li>我需要的标签。 我做错了什么。

import React, { Component } from 'react'
// import NeilProfile from './neil-profile.jpg'
import Expertise from './expertise'
import Work from './work'
import Activity from './activity'

export class Bottom extends Component {

  constructor (props) {
    super(props)
    this.state = { currentTab: 1 }
    this.changeTab = this.changeTab.bind(this)
  }

  changeTab (id) {
      this.setState({ currentTab: id })
  }

  render () {

    const tabList = [
      { 'id': 1, 'name': 'Work' },
      { 'id': 2, 'name': 'Expertise' },
      { 'id': 3, 'name': 'Activity'}
    ]

    return (
      <div className='profile-bottom'>
        <header>
          <ul className='profile-bottom__tab-navigation'>

            {tabList.map(function(tab) {
            <li key={tab.id} className={(this.state.currentTab === tab.id) ? 'active' : null}>
                <a onClick={() => this.changeTab(tab.id)} >
                    {tab.name}
                </a>
            </li>
          }.bind(this))}

          </ul>

          <div className='profile-bottom__filter'>
            <p>Show only: <span>Articles</span></p>
          </div>
        </header>
        <div className='profile-bottom__content'>
          {this.state.currentTab === 1 ?
            <Work />
            :null}

            {this.state.currentTab === 2 ?
              <Expertise />
            :null}

            {this.state.currentTab === 3 ?
              <Activity />
            :null}

        </div>
      </div>
    )
  }
}

export default Bottom

Answer 1

您缺少 map 功能中的 return 。像这样更新你的 map 功能 -

return (<li key={tab.id} className={(this.state.currentTab === tab.id) ? 'active' : null}>
                <a onClick={() => this.changeTab(tab.id)} >
                    {tab.name}
                </a>
</li>)