在下拉菜单中将字符串呈现为html

Question

我正在尝试以下代码将选项Volvo2设为其中之一，但我不断得到Volvo [object Object]。我也不太清楚如何使dangerouslySetInnerHTML工作。有办法实现吗？

在我的实际应用中，所有文本（Volvo<sup>2</sup>，Saab等）都以字符串形式出现，并且可能具有<sup>，<sub>或其他标签。

import React from "react";

export default function DropDown(props) {
  return (
    <select>
      <option value="volvo">
        Volvo<sup>2</sup>
      </option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
  );
}

Answer 1

这不是特定于反应的问题，而是一般的选择选项问题。这可以通过使用unicode这样解决：

Volvo²

因此，您可以使用将sub和sup标签解析为相应的unicode的函数。

Answer 2

option标签的内容只能是文本。您可以使用：

<option value="volvo">
    Volvo&sup2;
</option>