Javascript 在React和JSX中使用度符号

我正在用React编写一个温度应用程序，我正在显示元素中的不同温度

现在我正在尝试做

°；F

返回华氏温度，但我突然想到：这是

JSX

，不是HTML。果然，当您将其放入组件时，它会返回一个错误，因为DOM正在尝试读取JavaScript

---

是否有一个很好的解决方法？

通常我只是键入实际的符号。在您的情况下：

ºF

您可以在JSX中使用“”符号，并在其中编写特殊代码来渲染它

例：

返回（“°；”F）；

您可以在JSX的文本中使用HTML实体

function App() {
  return <h1>&deg;F</h1>;
}

函数应用程序（）{
返回°；F；
}

如果需要在字符串中使用实体对应的unicode编号，则可以使用该编号

function App() {
  return <h1>{'\u00b0'}</h1>;
}

函数应用程序（）{
返回{'\u00b0'}；
}

---

中列出了一些其他方法。

我最近也在开发一个类似的功能。以下是我的所有工作：

class Foo extends Component {
  render() {
    return (
      <div>
        <h1>&deg;</h1>
        <h1>&#176;</h1>
        <h1>&#x00B0;</h1>
        <h1>&#xB0;</h1> {/* for hex code, you can omit the leading zeros */}
        <h1>{'\u00B0'}</h1>

      </div>
    );
  }
}

类Foo扩展组件{
render（）{
返回(
&度；
°
°；
°；{/*对于十六进制代码，可以省略前导零*/}
{'\u00B0'}
);
}
}

度符号的unicode参考：

---

。我误解了你的问题吗？试着在jsx中使用<代码>\u2109这将帮助您解决问题。您能展示一下您的尝试吗？因为html实体在jsx中工作。多亏了你们两位，我实际上把这个问题搞糟了，我试图把

°旁边是调用组件时传递的道具，而不是组件本身。当我将符号放入组件时，它工作了。@logos_164没关系。有几种方法可以解决这个问题。
class Foo extends Component {
  render() {
    return (
      <div>
        <h1>&deg;</h1>
        <h1>&#176;</h1>
        <h1>&#x00B0;</h1>
        <h1>&#xB0;</h1> {/* for hex code, you can omit the leading zeros */}
        <h1>{'\u00B0'}</h1>

      </div>
    );
  }
}