React Bootstrap select 选项中的标志呈现为 [object, object]

Question

我想在 React Bootstrap 选择选项中显示标志图标。我已经尝试了基于 CSS 和基于 React 的库来这样做，在每种情况下我只得到 [object object]

我已经尝试使用 https://github.com/lipis/flag-icon-css CSS 库

<Form.Control as="select">
         <option><span className="flag-icon flag-icon-gr"></span></option>
</Form.Control>

这给了我警告和相同的 [Object object]

Warning: Only strings and numbers are supported as <option> children.

我也尝试过为同一个库使用 React 包装器 https://www.npmjs.com/package/react-flag-icon-css

<Form.Control as="select">
        <option><FlagIcon className="countryIcon" code="us" size="lg"/></option>
</Form.Control>

不生成警告但也没有结果

有谁知道我如何在选项中获得除字符串或数字以外的其他内容，或其他包含图标的方法？

Answer 1

你要关闭标签吗

 <Form.Control as="select">

[object Object] 显示，例如当您将字符串与对象连接时，例如：

console.log(""+{})

Answer 2

选项HTML 标签只接受文本，它不能接受任何其他HTML，它会去掉它。你可以查看这个 React issue [bug][16.5.0] option returns [object Object] instead of string and read the comment by Dan Abramov:

I don't think it was strictly a regression. This is kind of a thorny area. It was never intentionally supported. It accidentally worked on initial mount but then crashed on updates (#13261). Fixing the crash was more important, so we fixed it to be treated as text content (which it should be). Unfortunately this means putting custom components in the middle is not supported. That's consistent with how textarea and similar elements work.

I think it's better to show invalid output and warn about something that breaks on updates, than to let people use it only to discover it crashes in production. But I can see arguments for why this should be supported when the custom component returns a string. Unfortunately I don't know how to fix it in a way that would both solve the update crashes and support text-only content. I think for now it's reasonable to say putting custom components into doesn't really work (and never quite worked correctly), and ask you to manually provide a string to it.

或者，您可以使用 Bootstrap Dropdowns 创建一个带有国家列表的下拉按钮，代码如下：

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