3.3 渲染右侧索引列表

在src/pages/Citylist/index.js中添加如下代码：
在state中添加状态activeIndex ，指定当前高亮的索引：

  state = {// 指定右侧字母索引列表高亮的索引号activeIndex: 0}
结构代码：
{this.renderCityIndex()}
渲染右侧索引的函数：renderCityIndex() {return this.state.cityIndex.map((item,index) => {return (
item}>{/*判断一下，如果高亮状态的索引等于当前索引，那么就设置高亮样式*/}this.state.activeIndex == index? 'index-active' : ''}>{item == 'hot' ? '热' : item.toUpperCase()}
)})
}

3.4 滚动城市列表让对应右侧索引高亮显示

1、给list组件添加onRowsRendered配置项，用于获取当前列表渲染的行信息，在里面就会有相应信息
2、通过参数 startIndex 获取到 起始行对应的索引号
3、判断 startIndex 和 activeIndex 不同时候，更新状态 activeIndex为 startIndex

在src/pages/Citylist/index.js中添加如下代码：

this.rowRendered}
/>/**
* 获取滚动时候,相应的数据
* @param {*} param0
*/
rowRendered = ({ startIndex }) => {if (this.state.activeIndex !== startIndex) {this.setState({activeIndex: startIndex})}
}

3.5 点击右侧索引置顶该索引城市

1、给索引列表绑定点击事件
2、在点击事件中，通过index获取到当前项索引号
3、调用List组件的 scrollToRow方法，让List组件滚动到指定行
3.1、在constructor中，调用React.createRef() 创建ref对象
3.2、将创建好的ref对象，添加为List组件的ref属性
3.3、通过ref的current属性，获取到组件实例，再调用组件的scrollToRow方法
4、设置List组件的scrollToAlignment配置项值为start，保证点击行出现在页面顶部
5、对于点击索引无法正确定位的问题，调用List组件的 measureAllRows 方法，提前计算高度来解决

在src/pages/Citylist/index.js中添加核心代码：

constructor() {...this.listComponent = React.createRef()
}
async componentDidMount() {await this.getCityList()// 计算List组件高度this.listComponent.current.measureAllRows()
}
renderCityIndex() {return this.state.cityIndex.map((item, index) => {return (
item} onClick={() => {// 拿到List组件的实例this.listComponent.current.scrollToRow(index)}}>...
)})
}
render() {return (
...{/* 城市列表 */}{({ width, height }) => {return this.listComponent}scrollToAlignment="start".../>}}...
)
}

3.6 点击城市列表实现切换城市功能

1、给城市列表项绑定事件
2、判断当前城市是否有房源数据
3、如果有房源数据，则保存当前城市数据到本地缓存中，并返回上一页
4、如果没有房源数据，则提示用户：改城市暂无房源数据，不执行任何操作

在src/pages/Citylist/index.js中添加核心代码：

const HOST_CITY = ['北京', '上海', '广州', '深圳']
// 渲染每一行的内容
rowRenderer({key,         // Unique key within array of rowsindex,       // 索引号isScrolling, // 当前项是否正在滚动中isVisible,   // 当前项在List中是可见的style        // 重点属性：一定要给每一个行数添加该样式
}) {let letter = this.state.cityIndex[index]let citys = this.state.cityList[letter]return (key}style={style}className="city">
{this.formatCityIndex(letter)}
{citys.map(item => {return (// 绑定点击事件，传递城市名称和value
item.value} onClick={() => this.changeCity(item.label, item.value)}>{item.label}
)})}