“ class”属性在JSX中起作用:如何?

时间:2018-12-05 18:25:51

标签: reactjs jsx create-react-app

我有一个学生提交了包含许多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库来编译/运行该站点,但是我找不到任何提及将class转换为className的内容:< / p>

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",

1 个答案:

答案 0 :(得分:1)

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