react，点击li切换下面的数据如何实现

要实现点击 `li` 切换下面的数据，可以借助 React 的状态管理，具体实现步骤如下：

1. 在组件的 `state` 中添加一个属性用于存储当前选中的 `li` 的索引值，比如 `selectedIndex`；
2. 在 `li` 的 `onClick` 事件中，更新 `selectedIndex` 的值，可以使用箭头函数和 `setState` 方法实现，例如：`onClick={() => this.setState({ selectedIndex: index })}`；
3. 根据 `selectedIndex` 的值，从数据源中获取对应的数据并渲染到下面的区域。

以下是示例代码：

import React, { Component } from 'react';

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedIndex: 0 // 默认选中第一个 li
    };
  }

  handleClickLi = (index) => {
    this.setState({ selectedIndex: index });
  }

  render() {
    const { data } = this.props;
    const { selectedIndex } = this.state;
    const selectedData = data[selectedIndex];

    return (
      <div>
        <ul>
          {data.map((item, index) => (
            <li key={index} onClick={() => this.handleClickLi(index)}>{item.title}</li>
          ))}
        </ul>
        <div>{selectedData.content}</div>
      </div>
    );
  }
}

export default List;

在这个例子中，`List` 组件接收一个 `data` 属性作为数据源，其中每个元素包含一个 `title` 属性和一个 `content` 属性，用于展示在 `li` 和下面的区域中。在 `render` 方法中，我们遍历 `data` 数组，渲染出一个 `li` 列表，并为每个 `li` 添加一个 `onClick` 事件。在 `handleClickLi` 方法中，我们更新 `selectedIndex` 的值为当前点击的 `li` 的索引值。最后，我们根据 `selectedIndex` 的值，从 `data` 数组中获取对应的数据，并渲染到下面的区域中。