`class TabComponent extends Component {
0
503render() {
var array = this.props.data;
return (
{
array.map((arr, index) => {
return
;
})
}
)
}}
class TabsControl extends Component {
constructor(props) {
super(props);
this.state = {
currentIndex: this.props.data.length - 1
};
}
componentDidMount() {
}
componentWillReceiveProps(nextProps) {
this.setState({
currentIndex: nextProps.data.length - 1
})
}
shouldComponentUpdate(nextProps, nextState) {
return true;
}
check_tittle_index(index) {
return index === this.state.currentIndex ? "zdcxTab_tittle zdcxActive" : "zdcxTab_tittle";
}
check_item_index(index) {
return index === this.state.currentIndex ? "zdcxTab_item zdcxShow" : "zdcxTab_item";
}
render() {
var data = this.props.data;
let children = this.props.children;
return (
{React.Children.map(children, (element, index) => {
return (
{React.Children.map(children, (element, index) => {
return (
/*箭头函数没有自己的this，这里的this继承自外围作用域，即组件本身*/
{ this.setState({ currentIndex: index }) } } className={this.check_tittle_index(index)}>
{(element.props.name) * 1}
月
{element.props.billdatas}
元
);
})}
{/*Tab内容区域*/}
{React.Children.map(children, (element, index) => {
return (
);
})}
);
}}`
1，我用的是react框架；
2，我TAB切换内容区引用echarts饼图会报警告Can't get dom width or height；
3，不用TAB切换直接引用echarts饼图没问题
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
认证高级PHP讲师