"class" 属性在 JSX 中的作用：如何？

Question

我有一个学生提交的代码包含许多 class（不是 className）属性。例如：

import React, { Component } from "react";

class Images extends Component {
    render() {
        return (
            <div class="gallery">
                <div class="zoom"><img src="foo.jpg" alt="Foo"/></div>
                <div class="zoom"><img src="bar.jpg" alt="Bar"/></div>
            </div>
    );
}

但他的代码以某种方式起作用，并生成实际的 HTML class 属性。我什至尝试删除一行，以确保代码确实被使用，但果然在输出中删除了相应的行。

我不明白这是怎么回事。学生使用 create-react-app，它使用 react-scripts 库到 compile/run 站点，但我找不到任何关于将 class 转换为 className 的提及:

https://facebook.github.io/create-react-app/

https://github.com/facebook/create-react-app/tree/master/packages/react-scripts

谁能解释一下这个巫术？ ;)

P.S。相关库版本：

"jsx": "^0.9.89",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"@babel/preset-react": "^7.0.0",

Answer 1

此更改发生在 React@16。您也可以使用 class 但不是在所有情况下：https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html#changes-in-detail

"class" 属性在 JSX 中的作用：如何？

"class" Attribute Works in JSX: How?

jsx

reactjs

create-react-app