reactjs 在 < html>< body>React中操作或标记

oxiaedzo 于 2023-02-04 发布在 React

关注(0)|答案(3)|浏览(187)

在React中操作<html>或<body>标记的最佳方法是什么？
例如，动态设置'lang'属性或更改类？

<html lang="en" class="ltr">

我可以使用原始的DOM操作来实现这一点，但这是正确的方法吗？

3条答案

可以直接更改lang属性，您可以通过更改document.documentElement.lang的值来完成此操作
例如：

var newLang = 'fr';
...
document.documentElement.lang = newLang; // will set the lang property to 'fr'

我刚刚遇到了这样一个用例，当用户切换语言时，我想修改<html> lang属性。
React Helmet实际上使这变得相当简单。
首先安装React Helmet和npm install react-helmet，然后将Helmet组件导入到自己的组件中：

import {Helmet} from "react-helmet";

然后，只需从react状态获取lang，并将其传递到应用中任意位置的Helmet组件：

<Helmet htmlAttributes={{ lang : this.state.lang }}/> // with this.state = { lang : 'en' }

Freezystem's answer中语法的替代语法，取自 Helm 参考指南：

<Helmet>
  <html lang="en" />
</Helmet>

这可以从组件树中的任何地方呈现，当然，您可以使用动态值代替"en"。