“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>
    );
}

但不知怎的，他的代码可以工作，并生成实际的 HTMLclass属性。我什至尝试删除一行，以确保代码确实被使用，但果然相应的行在输出中被删除了。

我不明白这是如何运作的。学生使用了create-react-app，它使用该react-scripts库来编译/运行该网站，但我找不到任何提及任何一个转换class为className：

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

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

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

PS相关库版本：

"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