为什么 class 属性从 React 渲染的 "h1" 元素中消失了？

Question

这是我的 React.Component 的 render 方法：

class Layout extends React.Component {
    constructor() {
        super();
        this.state = {name: "Brian"};
    }

    changeName(name) {
        this.setState({name});
    }

    render() {
        return (
            <h1 class="row">hello</h1>
        );
    }
}

ReactDOM.render(
  <Layout/>,
  document.getElementById('app')
);

这是渲染后的 HTML:

<div id="app" class="container">
    <h1 data-reactroot="">hello</h1>
</div>

不明白，为什么h1的class属性消失了？

Answer 1

React 元素没有 class 属性。你必须使用 className 属性.

这里提供了原因，在 React 的文档中：
https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components

Answer 2

您需要使用 className 而不是 class

<h1 className="row">hello</h1>

为什么 class 属性从 React 渲染的 "h1" 元素中消失了？

Why does the class attribute disappear from "h1" element rendered by React?

html

javascript

jsx

reactjs