如何在React组件的render方法中使用注释?

I have the following component:

'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;

Enter image description here

我的 comments 会显示在用户界面上.

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

推荐答案

允许在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 here中注释如何工作的信息.

Reactjs相关问答推荐

ReferenceError:未在Redux组件中定义窗口

Redux向后端发送请求时出现钩子问题

cypress 不能点击SPAN

REACTJS:在Reaction中根据路由路径更改加载器API URL

如何访问子集合中的文档?

TanStack/Reaction-Query在我的Vercel应用程序中不起作用

如何使图像zoom 并移动到点击点

自定义变量默认、聚焦和填充时所需TextField中标签的星号 colored颜色

使用experial_useFormState将参数传递给服务器操作

在react上隐藏源映射

错误:操作必须是普通对象.使用自定义中间件进行异步操作. Redux/工具包

如何更新 FunctionComponentElement 的 props

useMemo 依赖项的行为

从ReactDataGridtry 将数据传递给父组件

React 应用程序可以嵌入到 PowerPoint 中吗?

将 clerk 与 supabase 集成的最佳实践

在 React 中,为什么在使用 addEventListener 时外部元素上的 onclick 事件监听器在内部元素的 onclick 事件监听器之前执行?

如何使用 React Hook Form 将寄存器作为 props 发送到子组件来收集数据?

在嵌套的 Stack Navigator 中的 BottomTabBar 中导航会导致比以前更多的渲染

网格项不缩小以适应包含的可滚动列表