｛React jsx babel es6 webpack｝如何在渲染中进行注释(return(//||/**/））

{ React jsx babel es6 webpack } How Can I Comment in render ( return ( // || /**/ ) )?

本文关键字：return 注释 es6 babel jsx React webpack      更新时间：2023-09-26

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

/* 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上设置。当您使用jsx通过webpack运行bundle时，它会抛出一个错误。

以下是的堆叠

  • 节点v6.0.0
  • React ES6 JSX Babel
  • Bundler Webpack

顺便说一句，因为节点v6已经过时了，我们还需要使用babel吗？

您可以在jsx中进行注释，但需要用大括号包装-

{/* A JSX comment */}
{/* 
  Multi
  line
  comment
*/}

请参阅React文档

相关文章：