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开发人员选择使用classNameHTML元素作为类的属性而不是class.根据React文档:

注意:由于JSX是JavaScript,因此不鼓励使用类和for等标识符作为XML属性名称.相反,React DOM组件分别需要DOM属性名称,如className和htmlFor.资源

由于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.