1. 如何在JSX中编写注释

在前面我们提到过，Fragment其实是一个React组件，因为它的首字母大写。

当我们需要在JSX中写注释时，需要使用花括号和注释语法，也可以使用这种写法，但是不能放在同一行

2. 添加样式

我们将添加一个CSS文件来定义样式：

在JS中引入CSS，然后在JSX中添加一个class

这时候样式会生效，但是会出现一个警告：

这是因为我们定义样式的class和定义组件的class重名了！建议我们使用className来替代：

这样就可以了。

总之：在React中，我们可以使用CSS文件来管理组件的样式。我们可以在组件中使用import语句来导入CSS文件。然后，我们可以在组件的JSX中使用className属性来指定组件的类名。这样，我们就可以在CSS文件中使用类名来定义组件的样式。但是要注意，不能在JSX中使用class属性来定义组件的类名，因为它会与定义类的class关键字混淆。因此，我们应该使用className属性来代替class属性。

3. 标签不转义

有时候我们希望直接将标签显示在页面上，而不是被转义成HTML实体，例如：

如果我们不希望进行转义，需要使用另一种写法。之前的写法是直接使用{item}：

有时候，我们希望在JSX中的文本内容不被转义。为了实现这一点，我们需要使用JSX的特殊属性——dangerouslySetInnerHTML。这个属性允许我们传递一个包含HTML代码的对象，以便在DOM中呈现HTML代码。但是要注意，使用这个属性会存在安全风险，因此只有在非常必要的情况下才应该使用它。

4. JSX的label

label标签的作用一般是扩大点击区域。例如，我们可以实现一个点击文本，将焦点移动到输入框上：

label标签的for属性指定点击后将要跳转到的元素的id。但是会出现一个警告，这是因为for与JSX语法冲突，需要修改为htmlFor：

最后，关于JSX中label标签的使用，需要注意的是，由于在React中，for是JavaScript的保留字，因此在JSX中，我们需要使用htmlFor属性来代替label标签中的for属性。这样，当用户点击label标签时，它就会将焦点移动到与htmlFor属性值相同的元素上。