如何在JSX中使用转义字符

Question

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

有任何方法可用吗？

Answer 1

使用与 Javascript 相同的转义(ECMAScript)

单引号

"双引号

\反斜杠

\n新行

\ r \n回车

\ t标签

\ b退格

\ f表格饲料

对于HTML部分,请使用HTML转义字符.

有一些轻微的陷阱,要知道像评估之间逃逸字符{}

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 <! - 评论名称 - > <>