javascript - 如何将动态类添加到 Gatsby.js 中的 body 标签?

标签 javascript reactjs gatsby

显然,这不是一件容易的事,因为 html.js 中唯一改变的是模板文件默认是 head meta 标签和内容。

元标记由 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。

最佳答案

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>

关于javascript - 如何将动态类添加到 Gatsby.js 中的 body 标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40995948/

相关文章:

javascript - 在 ASPX 中计时请求的客户端和服务器端时间?

javascript - React 组件 this.props 总是空的

javascript - 从数组中删除匹配的字符串

reactjs - 这是将 Prop 传递给 React 中的子组件的好方法吗?

Gatsby google-tagmanager 插件 : how to access dataLayer. 推送

javascript - 使用 jQuery 查找特定文本,然后将类添加到以下 UL

javascript - 为什么 Intl.NumberFormat 不适用于 Safari 和 Firefox 中的单位?

javascript - 使用 RegEx 在 Javascript 中匹配重复数字(相同的数字)两次

javascript - 在页面中渲染带有 HTML 标签的文本

javascript - 准备要传递到 API 查询的字符串(转义特殊字符)