如何使物料界面选择特定菜单项保持选中状态？

import React, { useState } from 'react';

function MenuItem({ label, isSelected, onClick }) {
  return (
    <div className={`menu-item ${isSelected ? 'selected' : ''}`} onClick={onClick}>
      {label}
    </div>
  );
}

function Menu() {
  const [selectedItem, setSelectedItem] = useState('home');

  return (
    <div>
      <MenuItem
        label="Home"
        isSelected={selectedItem === 'home'}
        onClick={() => setSelectedItem('home')}
      />
      <MenuItem
        label="About"
        isSelected={selectedItem === 'about'}
        onClick={() => setSelectedItem('about')}
      />
      {/* 更多菜单项 */}
    </div>
  );
}

export default Menu;

<template>
  <div>
    <div
      class="menu-item"
      :class="{ selected: isSelected(item) }"
      v-for="item in menuItems"
      :key="item.label"
      @click="selectItem(item.value)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: 'home',
      menuItems: [
        { label: 'Home', value: 'home' },
        { label: 'About', value: 'about' },
        // 更多菜单项
      ],
    };
  },
  methods: {
    selectItem(value) {
      this.selectedItem = value;
    },
    isSelected(item) {
      return this.selectedItem === item.value;
    },
  },
};
</script>

<style>
.menu-item.selected {
  background-color: #f0f0f0;
}
</style>