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文档：

注意：由于JSX是JavaScript，因此不鼓励使用类和for等标识符作为XML属性名称。相反，React DOM组件分别需要DOM属性名称，如className和htmlFor。 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。

Answer 2

通过反应你必须使用＆＃39; className＆＃39;不是类，因为类是保留的JavaScript语法。

就像div className =＆＃34; myclass＆＃34;

React不在元素上呈现类

2 个答案: