Question

我们是否有可能在渲染功能的return语句中添加注释。例如，在代码段下方找到。

 render: function() {
    var value = this.state.value;
    return (
        <div>                         
            <input type="text" value={value} />
            <select value="B">
                <option value="A">Apple</option>
                <option value="B">Banana</option>
                <option value="C">Cranberry</option>
            </select>
        </div>); 
    ...

在上面的代码中，我想在<input>标记旁边添加我的评论，例如Read-Only Textbox. Because it does not have onChange Event。我该如何添加它？

Answer 1

您可以像以下那样在渲染中添加评论：{/* COMMENT */}

Answer 2

像这样使用{/*comment*/} 工作demo

Answer 3

要在JSX中添加注释，您应该使用花括号（{}）来启动expression，然后在其中编写一个块注释（/**/）。

return (
  <div>
    {/* comment */}
  </div>
)

无论您是否在return语句内，此方法都有效：

const retVal = (
  <div>
    {/* comment */}
  </div>
)
return retVal

请注意以下情况是不可能的，因为您无法打开JSX元素的JSX表达式 outside ：

return (
  {/* comment */}
  <div></div>
)

相反，您只需简单地按常规方法即可：

return (
  // comment
  <div></div>
)

如何在render函数的return语句中添加注释？

3 个答案: