28

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

元标记由 Helmet 组件 ( {head.title.toComponent()}and {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

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

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

如果你真的需要支持 body 类，那么这个模块做的事情与 react-helmet 非常相似，但适用于 body 类https://github.com/iest/react-body-classname

于 2016-12-07T05:36:10.810 回答