javascript - React 不在元素上渲染类

Question

我目前有两个文件，一个 app.js 和一个 index.html，当我尝试使用一些 CSS 类呈现表单时，HTML 元素显示但是类丢失。

这是我的app.js:

var Form = React.createClass({
    handleClick: function() {
        alert('click')
    },
    render: function() {
        return (
            <div>
                <input class='form-control' type='text' name='list-name'/>
                <button class="btn btn-primary" onClick={this.handleClick}>Submit</button>
            </div>
        );
    }
});

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

这是我的 HTML 正文:

<div class="container">
    <h1>Title</h1>
    <div id="app" class="center"></div>
</div>

Answer 1

因为 class 可能会与 ECMAScript 冲突(这是一个保留关键字)，React 开发人员选择使用 className 作为类的 HTML 元素的属性，而不是 class 。根据 React 文档:

Note: Since JSX is JavaScript, identifiers such as class and for are discouraged as XML attribute names. Instead, React DOM components expect DOM property names like className and htmlFor, respectively. Source

由于 for 和 class 是 ECMAScript(JavaScript 是其实现)的保留关键字，因此它们不能用作 XML 属性名称。这意味着标签的属性，例如 div 或 input。因此，使用 className 来表示 HTML 元素的类。这是一个适用的例子:

return (
    <div>
        <input className='form-control' type='text' name='list-name'/>
        <button className="btn btn-primary" onClick={this.handleClick}>Submit</button>
    </div>
);

请注意 className 用于代替 class。