单击时在导航栏中只显示一个Li的逻辑: React + Typescript

单击时在导航栏中只显示一个Li的逻辑是指在React + Typescript中，当用户单击导航栏中的某个Li元素时，只显示被单击的Li元素，其他Li元素隐藏起来的逻辑。

为了实现这个逻辑，可以按照以下步骤进行操作：

创建一个导航栏组件，使用React和Typescript进行开发。
在组件的状态中添加一个变量，用于记录当前被选中的Li元素的索引。
在渲染导航栏时，使用map函数遍历Li元素的数据源，并为每个Li元素添加一个点击事件处理函数。
在点击事件处理函数中，更新组件的状态，将当前被点击的Li元素的索引保存到状态变量中。
在渲染导航栏时，根据当前被选中的Li元素的索引，为被选中的Li元素添加一个特定的样式，其他Li元素则不显示或显示不同的样式。

这样，当用户单击导航栏中的Li元素时，只有被单击的Li元素会显示为被选中状态，其他Li元素则根据需求进行隐藏或显示不同的样式。

在React + Typescript中，可以使用React的useState钩子来管理组件的状态，使用CSS样式来控制Li元素的显示和隐藏。以下是一个示例代码：

import React, { useState } from 'react';

const NavigationBar: React.FC = () => {
  const [selectedLiIndex, setSelectedLiIndex] = useState<number>(0);

  const handleLiClick = (index: number) => {
    setSelectedLiIndex(index);
  };

  return (
    <ul>
      {liData.map((li, index) => (
        <li
          key={index}
          onClick={() => handleLiClick(index)}
          className={selectedLiIndex === index ? 'selected' : ''}
        >
          {li}
        </li>
      ))}
    </ul>
  );
};

export default NavigationBar;

在上述代码中，liData是一个包含Li元素数据的数组。当用户单击某个Li元素时，handleLiClick函数会更新selectedLiIndex的值，从而触发组件的重新渲染。根据selectedLiIndex的值，为被选中的Li元素添加selected样式。

这是一个简单的实现逻辑，具体的样式和效果可以根据实际需求进行调整和扩展。

推荐的腾讯云相关产品和产品介绍链接地址：