React jsx babel es6 webpack 如何在渲染中评论（返回（//||/**/））？

Posted 2023-02-22

【中文标题】React jsx babel es6 webpack 如何在渲染中评论（返回（//||/**/））？

【英文标题】： React jsx babel es6 webpack How Can I Comment in render ( return ( // || /**/ ) )? React jsx babel es6 webpack 如何在渲染中评论（返回（//||/**/））？

【发布时间】：2016-08-26 02:55:19

【问题描述】：

我上周开始了一个项目。在回到我的团队之前，我想评论一下我的代码。

/* Just for the Syntax outlook */

class Foo extends React.Components 
  constructor(props) 
    super(props);  
  
  
  render() 
    return (
    
      <div className='bar'>
        
        /*
          <p> cannot commit!!!! </p>
          
          ** Following will throw error when bundled with webpack 
        */
        
        // This throws error as well. 
      
      <div>
    )
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

代码可能看起来像注释工作，但当前 JSbin 的设置未在 ES6 上设置。当你通过 webpack 和 jsx 运行 bundle 时，它​​会抛出一个错误。

下面是栈

节点 v6.0.0 React ES6 JSX Babel Bundler Webpack

顺便说一句，因为 Node v6 已经出来了，我们还需要使用 babel 吗？

【问题讨论】：

错误是因为您使用的是React.Components 而不是React.Component？

ReactJS - how to use comments的可能重复

【参考方案1】：

你可以在 jsx 中发表评论，但你需要用花括号把它包裹起来 -

/* A JSX comment */

/* 
  Multi
  line
  comment
*/ 

见the React docs

【讨论】：

值得一提的是，它之所以有效，是因为 JSX 中 cmets 之间的任何东西都被解析为 javascript。

注意：这在属性中不起作用。即<SomeComponent /* this does not work */ />