React 不在元素上渲染类

IT技术 javascript reactjs
2021-05-02 11:03:21

我目前有两个文件，一个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>
2个回答

因为class可能与 ECMAScript 冲突（它是一个保留关键字），React 开发人员选择使用className作为类的 HTML 元素的属性而不是class. 根据 React 文档：

注意：由于 JSX 是 JavaScript，不鼓励将 class 和 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。

使用 react，您必须使用“className”而不是 class，因为 class 是保留的 JavaScript 语法。

会像 div className="myclass"

其它你可能感兴趣的问题
上一篇ReactJS - 即使从选择下拉列表中选择了相同的选项也会触发事件 下一篇使用 chakra-ui 和 next.js 时，Object.fromEntries 不是函数错误