0
} else if (index === currentIndex) { // 当前级等于发生变化的层级, 选中项是传来的itemIndex
childIndex = itemIndex
} else { // 当前级大于发生变化的层级, 选中项应该置为默认0，因为下级的选项会随着上级的变化而变化
childIndex = 0
}
indexArr[index] = childIndex
if (arr[childIndex] && arr[childIndex].children) {
const nextIndex = index + 1
re(arr[childIndex].children, nextIndex)
}
}
}
re(options, 0)
this.setState(
{
indexs: indexArr // 重置所有选中项，重新渲染
},
() => {
this.props.onChange && this.props.onChange(indexArr)
}
)
}
总结
市面上成熟的多级联动很多，如果对功能要求比较高的话，建议用成熟的组件，这样开发成本低，文档全，团队中其他人易接手。如果只有用到里面非常简单的功能，很快就可以开发好，建议自己开发，没必要引用一个庞大的包，如果要特殊定制的话，就只有自己开发。无论以上哪种情况，能理解里面的运行原理甚好
主要说明在代码里面，也可以直接拷贝完整代码看，没多少内容，如果需要获取对应值的话，直接通过获取的索引查对应值就行了
完整代码
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {
StyleSheet,
View,
Text,
Picker,
TouchableOpacity,
} from 'react-native'
// 单个选项
class PickerItem extends Component {
static propTypes = {
list: PropTypes.array,
onChange: PropTypes.func,
defaultIndex: PropTypes.number,
}
static getDerivedStateFromProps(nextProps, prevState) { // list选项列表和defaultIndex变化之后重新渲染
if (nextProps.list !== prevState.list 关键词：如何封装一个React Native多级联动（代码完成）