React HTMLtoJSX 不转换大括号

Question

我遇到 HTMLtoJSX 转换器（npm：htmltojsx）的问题，与 https://facebook.github.io/react/html-jsx.html.

上正式显示的转换器相同

HTML-代码 <div>{</div> 被编译为以下 JSX 代码：

<div>{</div>

JSX 代码失败并出现以下错误：

Uncaught SyntaxError: embedded: Unexpected token (7:18)
   5 | var Hello = React.createClass({
   6 |   render: function() {
>  7 |     return <div>{</div>;
     |                   ^
   8 |   }
   9 | });

测试：https://jsfiddle.net/69z2wepo/28714/

有人知道这个问题的解决方案吗？

Answer 1

在 JSX 中，大括号用于包裹 javascript 表达式。您可以这样显示括号：

return <div>{'{'}</div>;

Answer 2

感谢您的回复！您的解决方案是正确的。

这似乎是官方 HTML 到 JSX 转换器中的错误：

https://github.com/facebook/react/issues/5910

作者已承诺修复

React HTMLtoJSX 不转换大括号

React HTMLtoJSX does not convert curly brackets

javascript

converter

reactjs

react-jsx