Question

我正在用React编写一个温度应用程序，我正在显示元素内不同温度的那部分。

现在我正尝试做°F来返回华氏温度，但是后来我想到了：这是JSX，不是HTML。果然，将其放入组件时，由于DOM试图读取JavaScript，它会返回错误。

对此有一个好的解决方法吗？

Answer 1

通常，我只键入实际符号。对于您的情况：import UIKit import WebKit class TestConstraintsViewController: UIViewController, WKUIDelegate { @IBOutlet weak var myNavBar: UINavigationBar! var webView: WKWebView! var webConfiguration: WKWebViewConfiguration! override func loadView() { super.loadView() webConfiguration = WKWebViewConfiguration() webView = WKWebView(frame: self.view.frame, configuration: webConfiguration) webView.uiDelegate = self webView.translatesAutoresizingMaskIntoConstraints = false let safeAreaGuide = view.safeAreaLayoutGuide let myConstrainst = [ NSLayoutConstraint(item: webView, attribute: .trailing, relatedBy: .equal, toItem: safeAreaGuide , attribute: .trailing, multiplier: 1, constant: 0), NSLayoutConstraint(item: webView, attribute: .top, relatedBy: .equal, toItem: myNavBar , attribute: .bottom, multiplier: 1, constant: 0), NSLayoutConstraint(item: webView, attribute: .bottom, relatedBy: .equal, toItem: safeAreaGuide , attribute: .bottom, multiplier: 1, constant: 0), NSLayoutConstraint(item: webView, attribute: .leading, relatedBy: .equal, toItem: safeAreaGuide , attribute: .leading, multiplier: 1, constant: 0) ] self.view.addSubview(webView) self.view.addConstraints(myConstrainst) } override func viewDidLoad() { let myURL = URL(string: "https://www.stackoverflow.com") let myRequest = URLRequest(url: myURL!) webView.load(myRequest) } @IBAction func dismissView(_ sender: Any) { self.dismiss(animated: true, completion: nil) } }

Answer 2

您可以在JSX中使用“”符号，并在其中编写特殊代码以呈现它。

例如：

return (<span>"&deg;"F</span>);

Answer 3

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

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

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

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

JSX Gotchas part of the documentation中列出了其他几种处理方法。

Answer 4

我最近也在开发类似功能。为我完成所有工作：

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>
    );
  }
}

度符号unicode的参考： https://graphemica.com/%C2%B0

在React和JSX中使用度数符号

4 个答案: