React Bootstrap select选项中的标记呈现为[object，object]

Question

我想在React Bootstrap选择选项中显示Flags图标。我已经尝试过基于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>

这给了我一个警告和相同的[对象对象]

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>

哪个不会生成警告，但也没有结果

有人知道除了Option中的字符串或数字，还是其他包含图标的方式，我还能得到什么？

Answer 1

您是否关闭标签

 <Form.Control as="select">

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

console.log(""+{})