如何在react本机导航中更改选定底部选项卡的背景色

import React, { useState } from 'react';

function Navigation() {
  const [selectedTabColor, setSelectedTabColor] = useState('blue');

  // 其他代码...

  return (
    <div>
      {/* 导航栏代码 */}
      <nav>
        <ul>
          <li style={{ backgroundColor: selectedTabColor }}>选项卡1</li>
          <li style={{ backgroundColor: selectedTabColor }}>选项卡2</li>
          <li style={{ backgroundColor: selectedTabColor }}>选项卡3</li>
        </ul>
      </nav>
      {/* 其他内容 */}
    </div>
  );
}

export default Navigation;

import React, { useState } from 'react';

function Navigation() {
  const [selectedTabColor, setSelectedTabColor] = useState('blue');

  const handleTabClick = (color) => {
    setSelectedTabColor(color);
  };

  return (
    <div>
      {/* 导航栏代码 */}
      <nav>
        <ul>
          <li
            style={{ backgroundColor: selectedTabColor }}
            onClick={() => handleTabClick('blue')}
          >
            选项卡1
          </li>
          <li
            style={{ backgroundColor: selectedTabColor }}
            onClick={() => handleTabClick('green')}
          >
            选项卡2
          </li>
          <li
            style={{ backgroundColor: selectedTabColor }}
            onClick={() => handleTabClick('red')}
          >
            选项卡3
          </li>
        </ul>
      </nav>
      {/* 其他内容 */}
    </div>
  );
}

export default Navigation;