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

要实现函数组件点击 `li` 切换下面的数据，可以使用 React Hooks 中的 `useState` 和 `useEffect` 来实现状态管理和副作用控制，具体实现步骤如下：

1. 使用 `useState` 创建一个状态变量，用于存储当前选中的 `li` 的索引值，比如 `selectedIndex`；
2. 在 `li` 的 `onClick` 事件中，更新 `selectedIndex` 的值；
3. 使用 `useEffect` 监听 `selectedIndex` 的变化，根据 `selectedIndex` 的值，从数据源中获取对应的数据并渲染到下面的区域。

以下是示例代码：

import React, { useState, useEffect } from 'react';

function List({ data }) {
  const [selectedIndex, setSelectedIndex] = useState(0); // 默认选中第一个 li
  const selectedData = data[selectedIndex];

  useEffect(() => {
    // 当 selectedIndex 变化时，重新获取数据
    selectedData = data[selectedIndex];
  }, [selectedIndex]);

  const handleClickLi = (index) => {
    setSelectedIndex(index);
  };

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

export default List;

在这个例子中，我们使用 `useState` 创建了一个状态变量 `selectedIndex`，并将其默认值设置为 0，表示默认选中第一个 `li`。在 `handleClickLi` 方法中，我们使用 `setSelectedIndex` 更新 `selectedIndex` 的值。在 `useEffect` 中，我们监听 `selectedIndex` 的变化，并根据其值重新获取对应的数据。最后，我们将 `selectedData` 的内容渲染到下面的区域中。