web-dev-qa-db-ja.com

Gatsby.jsのbodyタグに動的クラスを追加する方法は？

_html.js_テンプレートファイルでデフォルトで変更されるのはヘッドメタタグとコンテンツだけなので、これは簡単な作業ではありません。

メタタグはHelmetコンポーネント（{head.title.toComponent()}および{head.meta.toComponent()}）によって処理され、テンプレート内のHTMLの変更はReactによって管理されます。 （_<div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />_）

ただし、bodyタグはReactの範囲外であるため、ページ間を移動するときにオンザフライで変更する方法を理解できません。各ページに異なるボディバックグラウンドを適用したいので、これがまさに必要です。

_exports.onRouteUpdate_で_gatsby-browser.js_を使用してこれを解決できることはわかっていますが、ブラウザでJSが無効になっている場合でもクラスを表示したいです。つまり、_bundle.js_ファイルなしでエクスポートし、静的サイトのHTMLを生成するだけでも、そこにあることを望みます。

javascriptreactjsgatsby
14
Marcel Kalveram

それは、反応ヘルメットが<html>要素にクラスを動的/静的に設定することをサポートしているように見えます。

彼らは体にクラスを設定することをサポートしたくありません... https://github.com/nfl/react-helmet/issues/182

ボディクラスを本当にサポートする必要がある場合、このモジュールはreact-helmetと非常によく似ていますが、ボディクラス用です https://github.com/iest/react-body-classname

1
Kyle Mathews

React-helmetは、ボディ要素への属性の追加もサポートするようになりました。

したがって、特定のコンポーネント/ページにクラスを追加する場合は、次のようなことができます。

import Helmet from 'react-helmet'

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

// or

<Helmet>
    <body className="new-class-for-body" />
</Helmet>
28
Moris.io

ギャツビーは基本的にすべての反応コードをjsファイルに変換するので、クラスを追加/削除したい場合は、次のように通常のjQueryを使用できます。

Srcフォルダーの下に1つの.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 {
.
.
.
0
Kishan Oza