{ 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>
    )
  }
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;

代码可能看起来像注释工作，但当前 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的可能重复

标签： javascript node.js reactjs webpack jsx

【解决方案1】：

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

{/* A JSX comment */}

{/* 
  Multi
  line
  comment
*/}

见the React docs

【讨论】：

值得一提的是，它之所以有效，是因为 JSX 中 cmets 之间的任何东西都被解析为 JavaScript。
注意：这在属性中不起作用。即<SomeComponent { /* this does not work */ } />