classNames 未定义

Posted 2023-03-07

【中文标题】classNames 未定义

【英文标题】：classNames is not defined

【发布时间】：2018-12-14 07:13:06

【问题描述】：

我是 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？

@Derek 我不知道。正如我所说，这段代码不是我的。刚刚复制的。可能它没有定义。我正在阅读电子书并下载了他们所有的源代码。这只是我在本章中找到的一个js代码。

【参考方案1】：

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

【讨论】：

在我的 react 经验中 - react/gatsby 用于 react/react native - 我从来不需要导入 classNames...

@StephenTetreault 很好，它不是本机反应，所以我不确定你使用的是什么与它捆绑在一起

我做了 npm i -S 类名。 js 文件的名称是 app.js。我在 app.js 顶部添加了导入，我的浏览器显示了意外的标识符。

【参考方案2】：

所以，我认为您需要安装类名 npm 模块来绑定对象中定义的条件类。

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

npm i classnames --save

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

import classNames from 'classnames';

然后使用该模块将您的类绑定到 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 是第一个到达那里的。

【讨论】：

你知道 npm i 类名 --save 和 npm i -S 类名之间的区别吗？我都试过了，我看不出有什么区别

它们是完全相同的声明！ -S 只是 --save 的简写，同样 npm i 只是 npm install 的简写

谢谢。我尝试了控制台命令并在我的 app.js 文件顶部添加了导入。但我的 chrome 67 浏览器显示 Uncaught Syntaxerror..

我应该在 npm install -S 类名之前执行 npm install 吗？

将 type=text/babel 添加到我的脚本中。谢谢。错误消失了！

【参考方案3】：

上述答案有效，但您需要更改在 index.html 文件中导入 app.js 的行：

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

以上建议对我有用（我正在阅读与您相同的 React 书籍）。

【讨论】：

很好的解决方案。但是当您被告知使用文件协议时，您遇到了 CORS 障碍。按照说明。在 Mac 上，您必须在所有脚本前加上 .被发现。代码在那个章节里很烂developer.mozilla.org/en-US/docs/Web/HTML/Element/script

【参考方案4】：

根据@kust kust 的评论 您需要将type="text/babel" 添加到<script> 的app.js 标签中。 您需要将所有路径更新为相对...从/ 到./