未定义classNames

我是React开发的新手，并试图了解classNames如何在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)

问题是什么？

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