如何在JSX中使用转义字符

Question

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

有任何方法可用吗？

Answer 1

使用 same转义为Javascript（ECMAScript）

\'单引号

\“双引号

\ backslash

\ n新行

\ r \ n回车

\ t标签

\ b退格

\ f表单Feed

对于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

添加用户的屏幕如下：

  

Hello Stackoverflow＆lt; ！ - 评论名称 - ＆gt; ＆LT;＆GT;