如何在JSX中正确添加单行注释？React语法报错问题解析

报错原因 #

JSX是嵌入在JavaScript中的类XML语法，解析规则和纯JavaScript不同。当你在JSX元素内部（比如<BrowserRouter>标签之间）使用//注释时，JSX解析器会将其视为普通文本内容，而非JavaScript注释，这违反了XML语法规范，因此抛出SyntaxError。

正确的单行注释方法 #

在JSX中添加单行注释，需要将注释内容包裹在{/* */}中——{}用于在JSX中嵌入JavaScript表达式，/* */是JavaScript的多行注释语法，在这里可以实现单行注释的效果。

修改后的正确代码：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App /> {/* Trying to comment here about the 'App' component */}
  </BrowserRouter>
);

扩展：JSX多行注释 #

如果需要添加多行注释，同样使用{/* */}包裹即可：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    {/* 
      This is a multi-line comment
      explaining the App component
    */}
    <App />
  </BrowserRouter>
);

内容的提问来源于stack exchange，提问作者Anees Rehman