📌  相关文章
📜  在 React 和 HTML 之间工作方式不同的属性

📅  最后修改于: 2022-05-13 01:56:19.313000             🧑  作者: Mango

在 React 和 HTML 之间工作方式不同的属性

React(JSX)和 HTML属性。例如，像class和for这样的 HTML 属性在 React 中被替换为className和htmlFor 。在 React 和 HTML 之间有许多不同的属性。 JSX中的语法与 HTML 中的语法基本相同，但需要注意一些细微的差异。

我们不能在 React 和 HTML 中使用同名的属性，因为当代码在 React 中渲染时，JSX 会被翻译成 JavaScript，而class和for等属性在 JavaScript 中是保留字，所以我们不能使用React 中相同的属性名称。

1、className：在HTML中，常用class作为属性名，如下图所示： 

Welcome to GeeksforGeeks

但是在 JSX 中，我们不能使用单词class 。我们必须使用className代替，它适用于所有常规 DOM 元素，如

、 等。这是因为 JSX 被翻译成 JavaScript，而class是 JavaScript 中的保留字。 

Welcome to GeeksforGeeks

渲染 JSX 时，JSX 的className属性会自动渲染为class 属性。

2、自闭标签： 、
、等一些HTML元素只使用一个标签。属于既没有开始标签也没有结束标签的单个标签的标签，称为自关闭标签。

当我们在 HTML 中编写自闭合标签时，使用自闭合标签是可选的。例如： 

 and

但是在 JSX 中，我们必须包含正斜杠。 

 and

3. htmlFor：在HTML中，我们经常在

但是在 React 中，我们可以使用htmlFor属性来代替for属性。

4.选择标签：在 HTML 中，

注意：由于 selected 属性，最初选择了数据结构选项。但是在 React 中，它不是使用 selected 属性，而是在根 select 标记上使用 value 属性，如下例所示。 

render() {
   return (
       
   )
}

5. textarea标签：在HTML中的

但是在 React