在TSX（TypeScript）代码中是否有不需要花括号的注释方法？

TSX的注释是否需要加花括号，完全取决于注释所处的代码位置：

• 以下场景可以直接使用普通TS注释，不需要加花括号：
  所有不在JSX标签的内容渲染区、属性定义区内的注释，都支持原生注释写法：
  • 单行注释使用// 注释内容，适用于组件外层、函数内部JS逻辑区、JSX块根标签外的区域
  • 多行注释使用/* 注释内容 */，适用范围和上述单行注释一致
    示例代码：

  /* 列表组件多行行注释
  * 无需包裹花括号
  */
  const TodoList = () => {
    // 列表数据状态，单行注释无需花括号
    const [todoList, setTodoList] = useState<TodoItem[]>([])
  
    return (
      // JSX根标签外部的注释，无需花括号
      <ul className="todo-list">
        {todoList.map(item => <li key={item.id}>{item.content}</li>)}
      </ul>
    )
  }
  

• 以下场景必须使用花括号包裹注释，无替代方案：
  当注释需要写在JSX标签的内容区、或者属性之间时，必须使用{/* 注释内容 */}的格式，这是JSX语法的强制要求：
  • 该场景下如果省略花括号，注释内容会被当成普通文本直接渲染到页面上，无法起到注释作用
  • 若不想使用花括号注释，可将对应注释内容移动到JSX标签的外层区域编写，即可切换为普通注释语法

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