目录结构：

App.js:

import React, { Component } from 'react'

import { connect } from 'react-redux'

import Fruits from './Fruits/Fruits.js'

import Phone from './Phone/Phone.js'

import './App.css'

class App extends Component {

render() {

let { tabActiveIndex } = this.props

return (

  • 水果

  • 手机

);

}

}

//生命周期

Object.assign(App.prototype, {

componentDidMount() {

this.props.TABS_CHANGAE_STATE(['tabActiveIndex'], 0)

this.props.TABS_CHANGAE_STATE(['subTabActiveIndex'], 0)

}

})

//事件

Object.assign(App.prototype, {

handleClick(tabActiveIndex) {

this.props.TABS_CHANGAE_STATE(['tabActiveIndex'], tabActiveIndex)

this.props.TABS_CHANGAE_STATE(['subTabActiveIndex'], 0)

},

handleAuto() {

this.props.TABS_CHANGAE_STATE(['tabActiveIndex'], Math.floor(Math.random() * 1.9))

this.props.TABS_CHANGAE_STATE(['subTabActiveIndex'], Math.floor(Math.random() * 2.9))

}

})

const mapStateToProps = (state) => {

return {

tabActiveIndex: state.getIn(['tabs', 'tabActiveIndex']),

subTabActiveIndex: state.getIn(['tabs', 'subTabActiveIndex'])

}

}

const mapDispatchToProps = (dispatch) => {

return {

TABS_CHANGAE_STATE: (key, value) => {

dispatch({ type: 'TABS_CHANGAE_STATE', key, value })

}

};

}

export default connect(mapStateToProps, mapDispatchToProps)(App)

Fruits.js:

import React, { Component } from 'react'

import { connect } from 'react-redux'

import Apple from './Apple.js'

import Banana from './Banana.js'

import Grape from './Grape.js'

class Fruits extends Component {

constructor(props) {

super(props)

this.state = {

}

}

render() {

let { subTabActiveIndex } = this.props

return (

  • 苹果

  • 香蕉

  • 葡萄

);

}

}

//事件

Object.assign(Fruits.prototype, {

handleClick(subTabActiveIndex) {

this.props.TABS_CHANGAE_STATE(['subTabActiveIndex'], subTabActiveIndex)

}

})

const mapStateToProps = (state) => {

return {

tabActiveIndex: state.getIn(['tabs', 'tabActiveIndex']),

subTabActiveIndex: state.getIn(['tabs', 'subTabActiveIndex'])

}

}

const mapDispatchToProps = (dispatch) => {

return {

TABS_CHANGAE_STATE: (key, value) => {

dispatch({ type: 'TABS_CHANGAE_STATE', key, value })

}

};

}

export default connect(mapStateToProps, mapDispatchToProps)(Fruits)

Banana.js:

import React, { Component } from 'react'

import { connect } from 'react-redux'

class Banana extends Component {

constructor(props) {

super(props)

this.state = {

haveListData: false,

content: ''

}

}

render() {

let { content } = this.state

return (

{content}

);

}

}

//生命周期

Object.assign(Banana.prototype, {

componentWillReceiveProps(nextProps) {

let { haveListData } = this.state

if (nextProps.tabActiveIndex === 0 && nextProps.subTabActiveIndex === 1) {

if (haveListData) {

console.log('香蕉再次进来时不会请求接口')

} else {

console.log('香蕉第一次会请求接口')

this.setState({

content: 'Loading...'

})

setTimeout(() => {

this.setState({

content: '香蕉树',

haveListData: true

})

}, 1000)

}

}

}

})

const mapStateToProps = (state) => {

return {

tabActiveIndex: state.getIn(['tabs', 'tabActiveIndex']),

subTabActiveIndex: state.getIn(['tabs', 'subTabActiveIndex'])

}

}

const mapDispatchToProps = (dispatch) => {

return {

TABS_CHANGAE_STATE: (key, value) => {

dispatch({ type: 'TABS_CHANGAE_STATE', key, value })

}

};

}

export default connect(mapStateToProps, mapDispatchToProps)(Banana)

 

其他代码可以到github上看

github地址：https://github.com/xutongbao/react-tabs

 

 

 

 

 

 

 

 

 

好文推荐

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。