时间戳

首页 > 解决方案 > 忽略错误 className 与 Gatsby 中的服务器和客户端不匹配

reactjs - 忽略错误 className 与 Gatsby 中的服务器和客户端不匹配

问题描述

我正在使用 css 框架并像这样放置 cdn

//public <head> tag
<Helmet>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.6.15/dist/css/uikit.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/uikit@3.6.15/dist/js/uikit.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/uikit@3.6.15/dist/js/uikit-icons.min.js"></script>
</Helmet>

组件内部的示例

//Layout menu
<nav className="uk-navbar-container" data-uk-navbar="">
  <div className="uk-navbar-center">
    <ul className="uk-navbar-nav">
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/request">Request</Link></li>
    </ul>
  </div>
</nav>
...

例如，我收到错误

Warning: Prop `className` did not match. Server: "uk-navbar-container uk-navbar" Client: "uk-navbar-container"

UIkit JS 将class (className)在页面加载时进行调整，我想将其保留为动画内容。然后我试过了

// just add "uk-navbar" fixed the errors
<nav className="uk-navbar-container uk-navbar" data-uk-navbar="">
  <div className="uk-navbar-center">
    <ul className="uk-navbar-nav">
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/request">Request</Link></li>
    </ul>
  </div>
</nav>
...

但实际上有很多东西需要查找来修复错误

如何关闭（忽略）盖茨比中的错误（警告）？

标签： reactjsgatsbygetuikit

解决方案

Gatsby 默认带有默认的 ESLint 配置。正如您从文档中看到的那样：

Gatsby 附带一个内置的 ESLint 设置。对于大多数用户来说，我们内置的 ESLint 设置就足够了。但是，如果您知道您想自定义您的 ESLint 配置，例如您的公司有他们自己的自定义 ESLint 设置，这将显示如何做到这一点

.eslintrc要禁用 ESLint，只需在项目的根目录中创建一个空文件。

推荐阅读