reactjs - 如何在 JSX 中使用转义字符

Question

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

有可用的方法吗？

Answer 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

用户的屏幕如下:

Hello Stackoverflow < !-- comment in name --> <>