react选项卡----只有标签

import React, { Component } from 'react';
import './index.css'

class TabItem extends Component {
    constructor(props){
        super(props);
        this.state = {
            n:0
        }
    };
    inc(ind) {
        // 当调用时不绑定this时,this指向调用的window,由于是严格模式所以指向undefined
        this.setState({
            n: ind
        })
    };
    render() {
        let {data} = this.props;
        let { n } = this.state;
        return (
            
                data.map((item,index)=>{
                            return (
                                <div key={index} style={{ color: n === index ? 'red' : null }}
                    onClick={this.inc.bind(this, index)}>{item.tabName}</div>
                                //这里的this指向的是实例 但在再调用时 由于是window.onclick调用
                                // 导致内部this.setState拿不到this指向。又由于es6严格模式所以不会指向winodow而是undefined
                                // 所以就会报错 不存在这个属性
                            )
                }
            
        ))
    }
}

export default TabItem;

import React, { Component } from 'react';
import TabItem from './TabItem';
import './index.css'

const arrState = [
    {
        tabName:"登录",
    },
    {
        tabName: "注册",
    }
] 

class TabsControl extends Component {
    
    render() {
        return (
            <div>
                <TabItem data={arrState}/>
            </div>
        );
    }
}

export default TabsControl;

先子组件，后父组件