Question

显然，这不是一件容易的事，因为默认情况下html.js模板文件中唯一发生变化的是头部元标记和内容。

元标记由Helmet组件（{head.title.toComponent()}和{head.meta.toComponent()}）处理，模板内的HTML更改由React管理。（<div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />）

然后身体标签超出了React的范围，这就是为什么我无法在我从一个页面导航到另一个页面时如何即时更改它。这正是我所需要的，因为我想为每个页面应用不同的身体背景。

我知道我可以使用exports.onRouteUpdate中的gatsby-browser.js解决这个问题，但我希望即使在浏览器中禁用了JS，该类也会存在。即使我在没有bundle.js文件的情况下导出，只是生成静态网站HTML，我希望它能够存在。

Answer 1

React-helmet现在也支持向body元素添加属性。

因此，如果要将类添加到特定组件/页面，可以执行以下操作：

import Helmet from 'react-helmet'

// Inside your component
<Helmet
    bodyAttributes={{
        class: 'new-class-for-body'
    }}
/>

// or

<Helmet>
    <body className="new-class-for-body" />
</Helmet>

Answer 2

看起来似乎react-helmet支持在<html>元素上动态/静态地设置类。

他们不想支持在身体上设置类...... https://github.com/nfl/react-helmet/issues/182

如果你真的需要支持身体类，那么这个模块会做一些非常类似于react-helmet的事情，但对于身体类https://github.com/iest/react-body-classname

Answer 3

Gatsby基本上是将您的所有React代码转换为js文件，因此，如果您想添加/删除类，则可以像这样使用普通的jQuery

在src文件夹下创建一个.js文件，并编写逻辑来删除/添加类..mine可能与您不同。..但这是示例。.

custome.js

$(document).ready(() => {
    $(window).scroll(function () {
        if ($(window).scrollTop() >= 78) {
          $('nav').addClass('sticky');
        }
        else {
          $('nav').removeClass('sticky');
        }
      });
})

，只需将此js导入您要应用此更改的任何文件中即可。

Header.js

import React from 'react'
import { Link } from 'gatsby'
import logo from '../images/Logo.png';
import 'bootstrap/dist/js/bootstrap';
import './custome';
class Header extends React.Component {
.
.
.

如何在Gatsby.js中为body标签添加动态类？

3 个答案: