Тег
Option HTML принимает только текст, он не может принимать любые другие HTML, он удаляет его. Вы можете проверить эту опцию React Issue [bug] [16.5.0], которая возвращает [object Object] вместо строки и прочитать комментарий Dan Abramov :
Я не думаю, что это была строго регрессия. Это своего рода тернистый район. Это никогда не было намеренно поддержано. Он случайно работал при первоначальном монтировании, но затем падал при обновлении ( # 13261 ). Исправление сбоя было более важным, поэтому мы исправили его, чтобы он воспринимался как текстовое содержимое (как и должно быть). К сожалению, это означает, что размещение пользовательских компонентов в середине не поддерживается. Это согласуется с тем, как работают textarea и подобные элементы.
Я думаю, что лучше показывать недопустимый вывод и предупреждать о чем-то, что ломается в обновлениях, чем позволить людям использовать его только для обнаружения сбоев в работе. Но я вижу аргументы, почему это должно поддерживаться, когда пользовательский компонент возвращает строку. К сожалению, я не знаю, как исправить это таким образом, чтобы это одновременно решало проблемы с обновлением и поддерживало только текстовый контент. Я думаю, что на данный момент разумно сказать, что помещение пользовательских компонентов в действительности не работает (и никогда не работало правильно), и попросить вас вручную предоставить строку для него.
В качестве альтернативы, вы можете использовать Bootstrap Раскрывающиеся списки для создания раскрывающейся кнопки со списком стран с использованием приведенного ниже кода:
App.js:
...
import Dropdown from 'react-bootstrap/Dropdown';
import FlagIcon from './FlagIcon.js'
function App() {
const [countries] = useState([
{ code: 'gr', title: 'Greece'},
{ code: 'gb', title: 'United Kingdom'},
{ code: 'us', title: 'United States'}
]);
const [toggleContents, setToggleContents] = useState("Select a country");
const [selectedCountry, setSelectedCountry] = useState();
return (
<div className="App">
<Form>
<Dropdown
onSelect={eventKey => {
const { code, title } = countries.find(({ code }) => eventKey === code);
setSelectedCountry(eventKey);
setToggleContents(<><FlagIcon code={code}/> {title}</>);
}}
>
<Dropdown.Toggle variant="secondary" id="dropdown-flags" className="text-left" style={{ width: 300 }}>
{toggleContents}
</Dropdown.Toggle>
<Dropdown.Menu>
{countries.map(({ code, title }) => (
<Dropdown.Item key={code} eventKey={code}><FlagIcon code={code}/> {title}</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
</Form>
</div>
);
}
FlagIcon.js:
import React from 'react';
import FlagIconFactory from 'react-flag-icon-css';
// const FlagIcon = FlagIconFactory(React);
// If you are not using css modules, write the following:
const FlagIcon = FlagIconFactory(React, { useCssModules: false })
export default FlagIcon;
Вы получите раскрывающуюся кнопку, подобную этой:
Вы также можете проверить этот рабочий Stackblitz: https://stackblitz.com/edit/react-bootstrap-flags-dropdown-menu