如何在 React js 中添加注释

在 React 中添加注释可以帮助我们更好地组织代码，方便其他开发者理解代码的逻辑。本文将介绍如何在 React 中添加注释。

方法一：JSX 注释

React 中可以使用 JSX 注释来添加注释。JSX 注释是一段被花括号包含的 JavaScript 注释，在运行时将被忽略。

import React from 'react';

function App() {
  return (
    <div>
      {/* 这是一段注释 */}
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;

上面的代码中，我们在 h1 元素前面使用了 JSX 注释。在实际运行时，这段注释会被 React 忽略。

方法二：单行注释和多行注释

React 中也可以使用单行注释和多行注释。单行注释以 // 开头，多行注释以 /* 开头，以 */ 结尾。

import React from 'react';

function App() {
  const name = 'Tom';

  // 这是一段单行注释
  return (
    <div>
      {/* 这是一段多行注释 */}
      <h1>Hello, {name}!</h1>
      {/* <h2>这行代码暂时不需要执行</h2> */}
    </div>
  );
}

export default App;

在上面的代码中，我们使用了单行注释和多行注释。需要注意的是，如果我们想要在 JSX 中使用多行注释，必须使用花括号包含注释。

总结

在 React 中添加注释可以帮助我们更好地组织代码，提高代码的可读性和维护性。本文介绍了 JSX 注释和单行注释、多行注释两种添加注释的方法。

参考文献

• Adding comments to JSX