28

html.jsデフォルトでテンプレート ファイル内で変更されるのは head メタ タグとコンテンツだけであるため、これは明らかに簡単な作業ではありません。

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

ただし、 body タグは React の範囲外であるため、ページ間を移動するときにオンザフライで変更する方法がわかりません。各ページに異なるボディの背景を適用したいので、それはまさに私が必要とするものです.

exports.onRouteUpdateinを使用してこれを解決できることはわかっていgatsby-browser.jsますが、ブラウザーで JS が無効になっている場合でもクラスが存在するようにしたいと考えています。bundle.js静的サイト HTML を生成するだけで、ファイルなしでエクスポートしてもそこにあることを意味します。

4

2 に答える 2

64

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>
于 2017-09-25T12:43:03.323 に答える
5

<html>react-helmet は、要素にクラスを動的/静的に設定することをサポートしているように見えます。

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

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

于 2016-12-07T05:36:10.810 に答える