下载掌阅APP，畅读海量书库
立即打开
本节将实现一个常见的案例，即菜单排他。该功能使得默认情况下第一个菜单被选中，并且当用户单击任一菜单项时，只有该菜单项会以红色高亮显示。这种排他性的菜单功能在许多网站和应用程序中都非常常见。
为了实现这个功能，使用React组件，并在其中定义了一个菜单组件。该菜单组件将数据存储在this.state中，数据包括“首页”“关于我们”和“新闻中心”这三个选项。同时，还定义一个currentIndex变量来记录当前选中的菜单项。
在菜单组件中，使用li标签渲染数组中的数据。利用React的响应式更新特性，将数据动态渲染到菜单中。
接下来，通过一段示例代码来了解实现过程。
通过上述代码，我们可以轻松实现一个功能强大的菜单组件。这个组件不仅实现了菜单排他功能，还能够根据用户的单击动态地高亮显示选中项。
排他功能在许多网站和应用程序中都非常有用。例如，在在线商城中，通过使用这个菜单组件，用户可以方便地导航到首页、关于我们和新闻中心等重要页面。每当用户单击一个菜单项时，只有该项会以红色高亮显示，从而提醒用户当前所处的位置。
