如何在 React 中使用注释

IT技术 reactjs react-native
2021-04-01 07:45:43

如何render在 React 组件的方法内使用注释？

我有以下组件：

'use strict';
 var React = require('react'),
   Button = require('./button'),
   UnorderedList = require('./unordered-list');

class Dropdown extends React.Component{
  constructor(props) {
    super(props);
  }
  handleClick() {
    alert('I am click here');
  }

  render() {
    return (
      <div className="dropdown">
        // whenClicked is a property not an event, per se.
        <Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button>
        <UnorderedList />
      </div>
    )
  }
}

module.exports = Dropdown;

在此处输入图片说明

我的评论显示在用户界面中。

在组件的渲染方法中应用单行和多行注释的正确方法是什么？

6个回答

render允许在方法内进行注释，但为了在 JSX 中使用它们，您必须将它们括在大括号中并使用多行样式注释。

<div className="dropdown">
    {/* whenClicked is a property not an event, per se. */}
    <Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button>
    <UnorderedList />
</div>

您可以在此处阅读有关 JSX 中注释如何工作的更多信息。

我不知道为什么，但它总是给我一种糟糕的代码或代码中的错误的感觉。换句话说，似乎注释并没有以这种方式在我的代码中进行调整。我不确定我是否使用过双斜线风格的//评论
2021-05-27 07:45:43
大声笑，评论需要用大括号括起来，很有趣
2021-06-10 07:45:43
而像 <div></div> {/* comment */} 这样的东西会产生错误。注释必须在新行中。
2021-06-11 07:45:43

这是允许您使用//包含注释的另一种方法：

return (
  <div>
    <div>
      {
        // Your comment goes in here.
      }
    </div>
    {
      // Note that comments using this style must be wrapped in curly braces!
    }
  </div>
);

这里的问题是您不能使用这种方法包含单行注释。例如，这不起作用：

{// your comment cannot be like this}

因为右括号}被认为是注释的一部分，因此被忽略，从而引发错误。

@LukeCarelsen 它确实有效，因为他将 括//在方括号中。
2021-06-09 07:45:43
聪明，它完美地工作。我想要这种方法的原因是 VS Code 中更好的注释扩展可以工作。
2021-06-09 07:45:43

另一方面，以下是一个有效的评论，直接从工作应用程序中提取：

render () {
    return <DeleteResourceButton
            // Confirm
            onDelete = {this.onDelete.bind(this)}
            message = "This file will be deleted from the server."
           />
}

显然，当在JSX 元素的尖括号内时，//语法有效，但{/**/}无效。以下断点：

render () {
    return <DeleteResourceButton
            {/* Confirm */}
            onDelete = {this.onDelete.bind(this)}
            message = "This file will be deleted from the server."
           />
}
有没有这方面的文档？我也刚发现这个。
2021-05-25 07:45:43
@MinhNghĩa，我在文档中寻找了不同的评论用例，但找不到。如果有人能找到东西，请分享！
2021-05-31 07:45:43

除了其他答案之外，还可以在 JSX 开始或结束之前和之后使用单行注释。这是一个完整的总结：

有效的

(
  // this is a valid comment
  <div>
    ...
  </div>
  // this is also a valid comment
  /* this is also valid */
)

如果我们在 JSX 渲染逻辑中使用注释：

(
  <div>
    {/* <h1>Valid comment</h1> */}
  </div>
)

声明 props 时可以使用单行注释：

(
  <div
    className="content" /* valid comment */
    onClick={() => {}} // valid comment
  >
    ...
  </div>
)

无效的

当在 JSX 中使用单行或多行注释而不将它们包装在 中时{ }，注释将呈现到 UI：

(
  <div>
    // invalid comment, renders in the UI
  </div>
)
此站点上突出显示的语法似乎不一致。
2021-06-19 07:45:43

根据官方网站，这是两种方式：

<div>
  {/* Comment goes here */}
  Hello, {name}!
</div>

第二个例子：

<div>
    {/* It also works 
    for multi-line comments. */}
    Hello, {name}! 
</div>

这是参考：如何在 JSX 中编写注释？

其它你可能感兴趣的问题
上一篇除非提供了“--jsx”标志，否则不能使用 JSX 下一篇在 useEffect 中，不提供依赖数组和提供空数组有什么区别？