在 React 中切换语言的下拉菜单？答案

【问题标题】：Dropdown menu to switch languages in React?在 React 中切换语言的下拉菜单？
【发布时间】：2022-11-19 09:06:40
【问题描述】：

我一直在尝试制作一个下拉菜单组件，以便在我的投资组合的登陆页面上使用。我需要菜单来将网站上的文本从英语更改为我的母语，反之亦然，因此它应该包含选项“EN”和“IT”以及两个标志的图像，就像我附上的图片一样。

这是它目前的样子，它也可以工作，但我不能/不知道如何使用 < select > 元素添加标志。

import React, { useContext } from "react";
import { languageOptions } from "../languages";
import { LanguageContext } from "../container/Language";

export default function LanguageSelector() {
  const { userLanguage, userLanguageChange } = useContext(LanguageContext);

  const handleLanguageChange = (e) => userLanguageChange(e.target.value);
  return (
    <select
      onChange={handleLanguageChange}
      value={userLanguage}
    >
      {Object.entries(languageOptions).map(([id, name]) => (
        <option key={id} value={id}>
          {name}
        </option>
      ))}
    </select>
  );
}

现在： vs 我希望它看起来像：(https://i.stack.imgur.com/QDugw.png)

【问题讨论】：

标签： reactjs

【解决方案1】：

在 React 中，我认为 option 元素不会将 img 作为子元素（select 元素也不会）。您可以使用无序列表。下面的粗略示例。

// Get a hook function
const {useState} = React;

const Example = ({title}) => {
    const [cssDisplay, setCssDisplay] = useState('none');
    const [labelDisplay, setLabelDisplay] = useState('Select Language')
    const [langFlag, setLangFlag] = useState()
    
    const picUKFlag = "https://upload.wikimedia.org/wikipedia/commons/8/83/Flag_of_the_United_Kingdom_%283-5%29.svg"
    const picITFlag = "https://upload.wikimedia.org/wikipedia/en/0/03/Flag_of_Italy.svg"

  const showDropdown = () => {
    if (cssDisplay === 'none'){
      setCssDisplay('block');
    } else {
      setCssDisplay('none');
    }
  };
  
  const selectListItem = (event) => {
    setCssDisplay('none');
    setLabelDisplay('');
    if (event.target.id === "English"){
      setLangFlag(<img src={picUKFlag} height="30" width="30" alt="nope" />)
    }
    if (event.target.id === "Italian"){
      setLangFlag(<img src={picITFlag} height="30" width="30" alt="nope" />)
    }
  };
  
 
    return (
     <div>
      <button onClick={showDropdown} >{labelDisplay}{langFlag}</button>
      <ul style={{display: cssDisplay}}>
        <li onClick={selectListItem} id="English">
         <img src={picUKFlag} height="30" width="30" alt="nope" onClick={selectListItem} id="English" />
         English
        </li>
        <li onClick={selectListItem} id="Italian">
          <img src={picITFlag} height="30" width="30" alt="nope" onClick={selectListItem} id="Italian" />
         Italian
         </li>
       </ul>
     </div>
    );
};

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <Example />
);

li {list-style: none;)

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

【讨论】：