类名未定义

IT技术 javascript reactjs
2021-05-14 02:37:09

我是 React 开发的新手，并试图了解 classNames 如何在 React 中工作。

这是我书中的react代码。我刚刚复制了它。

const MOUNT = document.getElementById('root');
class App extends React.Component {
  render() {
    const klasses = classNames({
      box: true, // always apply the box class
      alert: this.props.isAlert, // if the prop is set
      severity: this.state.onHighAlert, // with state
      timed: false // never apply this class
    });
    return React.createElement(
      'div',
      {className: klasses},
      React.createElement('h1', {}, 'Hello world')
    );
  }
}
ReactDOM.render(React.createElement(App, {}), MOUNT);

我将此代码的脚本文件包含到 html 中，浏览器控制台显示此类错误。

app.js:4 Uncaught ReferenceError: classNames is not defined
at App.render (app.js:4)
at finishClassComponent (react-dom.js:11320)
at updateClassComponent (react-dom.js:11297)
at beginWork (react-dom.js:11676)
at performUnitOfWork (react-dom.js:13644)
at workLoop (react-dom.js:13753)
at HTMLUnknownElement.callCallback (react-dom.js:1527)
at Object.invokeGuardedCallbackDev (react-dom.js:1566)
at invokeGuardedCallback (react-dom.js:1423)
at performWork (react-dom.js:13871)

问题是什么？

4个回答

因此，我认为您需要安装 classnames npm module来绑定对象中定义的条件类。

https://www.npmjs.com/package/classnames

npm i classnames --save

接下来，您需要在使用前在 .js / .jsx 文件中要求它。

import classNames from 'classnames';

然后使用module将您的类绑定到 React 元素。

import classNames from 'classnames';
const MOUNT = document.getElementById('root');
class App extends React.Component {
  render() {
    const klasses = classNames({
        box: true, // always apply the box class
        alert: this.props.isAlert, // if the prop is set
        severity: this.state.onHighAlert, // with state
        timed: false // never apply this class
    });
    return React.createElement(
      'div',
      {className: klasses},
      React.createElement('h1', {}, 'Hello world')
    );
  }
}
ReactDOM.render(React.createElement(App, {}), MOUNT);

希望这会有所帮助，看起来 Tholle 是第一个到达那里的。

classnames是您需要安装并导入到module中的库。尝试npm i -S classnames在您的 shell 中，然后import classNames from 'classnames';在您的 JavaScript 文件的顶部。

上述工作的答案，但你需要改变行导入app.js您的index.html文件：

<script type="module" "src="app.js"></script>

上面的建议对我有用（我正在阅读和你一样的 React 书）。

  1. 每从@kust昆明理工评论你需要添加type="text/babel"到<script>的标签app.js。
  2. 您需要将所有路径更新为相对路径...从/到./
其它你可能感兴趣的问题
上一篇使用react测试库提交带有数据的单元测试表单 下一篇Reactstrap - 在轮播上显示本地图像