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;
先子组件,后父组件