在 React 中注释掉 HTML

有时候，在 React 中我们需要注释掉 HTML 代码以便进行调试或者暂时去除某些元素，但是在 React 中，注释的形式略有不同。

注释单行 HTML

在单行 HTML 元素前后用花括号 {} 包裹注释符号即可将这一行注释掉。

render() {
  return (
    <div>
      { /* 这是注释 */ }
      <p>Hello World</p>
    </div>
  )
}

渲染的页面将只显示 'Hello World'，'这是注释' 会被忽略掉。

注释多行 HTML

React 中没有提供直接注释多行 HTML 元素的方式，但是你可以使用多个单行注释符号来注释掉多行元素。

render() {
  return (
    <div>
      {/* 
        <p>Hello World</p>
        <p>Hello React</p>
        <p>Hello Comment</p>
      */}
    </div>
  )
}

总结

在 React 中注释 HTML 元素的方法，不同于传统的使用 <!-- --> 注释方式，需要用花括号 {} 包裹注释符号，注释单行 HTML 元素只需在其前后使用 {/* */} 即可，注释多行 HTML 元素则需要使用多个单行注释符号。