0 // 当前级指定选中第几项,默认为第一项
items.push({
defaultIndex: childIndex,
values: arr //当前级的选项列表
})
if (arr[childIndex] && arr[childIndex].children) {
const nextIndex = index + 1
re(arr[childIndex].children, nextIndex)
}
}
}
re(options, 0) // re为一个递归函数
return items.map((obj, index) => {
return ( // PickerItem为单个选择项,list为选项列表，defaultIndex为指定选择第几项，onChange选中选项改变时回调函数，itemIndex选中的第几项，index为第几级，如（2, 1）为选中第二级的第三项
<PickerItem
key={index.toString()}
list={obj.values}
defaultIndex={obj.defaultIndex}
onChange={(itemIndex) => { this.onChange(itemIndex, index)}}
/>
)
})
}
PickerItem为单个选择项组件，react native中的自带Picker在安卓和IOS上面表现的样式是不一样的，如果产品要求一样的话，就在PickerItem里面改，只需提供相同的接口，相当于PickerItem是独立的，维护起来很方便
// 单个选项
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多级联动（代码完成）