如何在 JSX 中使用转义字符答案

【问题标题】：how to use escape characters in JSX如何在 JSX 中使用转义字符
【发布时间】：2018-07-07 03:40:07
【问题描述】：

我想在我的 React 应用程序中使用一些转义字符，但我没有找到任何资源可以告诉我如何在我的应用程序中使用转义字符。

有任何可用的方法吗？

【问题讨论】：

请阅读帮助部分，了解如何提问。通常包括您尝试过的内容。
@DarrenSweeny 很清楚他想要什么，我来到这里是想了解同样的事情。

标签： reactjs jsx

【解决方案1】：

使用 same 转义符作为 Javascript (ECMAScript)

' 单引号

" 双引号

\反斜杠

\n 换行

\r 回车

\t 制表符

\b 退格

\f 换页

对于 HTML 部分，使用 HTML 转义字符。

有一些较小的gotchas，需要注意，例如评估 {} 之间的转义字符

HTML：

<div id="container">
    <!-- This element's contents will be replaced with MyComponent. -->
</div>

JSX：

class MyComponent extends React.Component {
  render() {
    console.info('Test line\nbreak');
    return <div>Hello {this.props.name} &lt;> </div>;
  }
}

ReactDOM.render(
  <MyComponent name="Stackoverflow  &lt; !-- comment in name -->" />,
  document.getElementById('container')
);

此程序将其打印到控制台：

Test line
break

而用户的屏幕如下：

你好 Stackoverflow

【讨论】：