尝试使用 React.DOM 设置正文样式答案

【问题标题】：Trying to use React.DOM to set body styles尝试使用 React.DOM 设置正文样式
【发布时间】：2014-10-17 22:45:03
【问题描述】：

如何使用 React.DOM 更改 HTML body 的样式？

我试过这段代码，但它不起作用：

var MyView = React.createClass({
  render: function() {
    return (
      <div>
        React.DOM.body.style.backgroundColor = "green";
        Stuff goes here.
      </div>
    );
  }
});

如果你从浏览器控制台执行它，它可以工作（但我需要它在 ReactJS 代码中工作）： document.body.style.backgroundColor = "green";

另请参阅此问题以获取类似但不同的解决方案： Change page background color with each route using ReactJS and React Router?

【问题讨论】：

React.DOM 用于创建 React 组件。它并没有真正让访问现有的 DOM 节点。React.DOM.body 是一个构造函数，它不是对document.body 的引用。
知道了，你的回答很有道理，但是在这种情况下，它不能用来为 backgroundColor 样式标签“构造”一个新样式吗？

标签： javascript reactjs react-jsx

【解决方案1】：

这就是我最终使用的。

import { useEffect } from "react";

export function useBodyStyle(style: any){
    useEffect(()=>{
        for(var key in style){
            window.document.body.style[key as any] = style[key];
        }
        return () => {
            window.document.body.style[key as any] = '';
        }
    }, [style])
}

【讨论】：

【解决方案2】：

带有功能组件和useEffect hook：

useEffect(()  => {
    document.body.classList.add('bg-black');

    return () => {
        document.body.classList.remove('bg-black');
    };
});

【讨论】：

【解决方案3】：

即使您可以通过响应提供的答案来设置正文样式，我更喜欢组件只负责设置自己的样式。

就我而言，有一个替代解决方案。我需要更改身体背景颜色。这可以很容易地实现，而无需更改 react 组件中的 body 样式。

首先我将此样式添加到 index.html 标头中。

<style>
    html, body, #react-app {
        margin: 0;
        height: 100%;
    }
</style>

然后，在我最外层的组件中，我将 backgroundColor 设置为所需的值，将高度设置为 100%。

【讨论】：

【解决方案4】：

假设你的 body 标签不是另一个 React 组件的一部分，像往常一样改变它：

document.body.style.backgroundColor = "green";
//elsewhere..
return (
  <div>
    Stuff goes here.
  </div>
);

建议放在componentWillMount方法，取消在componentWillUnmount：

componentWillMount: function(){
    document.body.style.backgroundColor = "green";
}

componentWillUnmount: function(){
    document.body.style.backgroundColor = null;
}

【讨论】：

在直接导航到页面时 React 崩溃，因为文档尚未定义。
为什么要有componentWillUnmount？
@DhavalJardosh 因为你希望你的身体在卸载改变身体样式的组件时恢复到正常的“状态”。
我看到的是，每当我们离开页面或离开该组件时，它都会自动清除状态。如果我错了，请纠正我，感谢您的回复。
除非这不是状态。这是DOM操作。当您离开组件时，这将保持不变，除非您将其重新设置为 ComponentWillUnmount

【解决方案5】：

加载或附加额外类的最佳方法是在 componentDidMount() 中添加代码。

用 react 和流星测试：

componentDidMount() {
    var orig = document.body.className;
    console.log(orig);  //Just in-case to check if your code is working or not
    document.body.className = orig + (orig ? ' ' : '') + 'gray-bg'; //Here gray-by is the bg color which I have set
}
componentWillUnmount() {
    document.body.className = orig ;
}

【讨论】：

【解决方案6】：

将多个属性从 js 类加载到文档正文的一个很好的解决方案是：

componentWillMount: function(){
    for(i in styles.body){
        document.body.style[i] = styles.body[i];
    }
},
componentWillUnmount: function(){
    for(i in styles.body){
        document.body.style[i] = null;
    }
},

在你写下你想要的身体风格之后：

var styles = {
    body: {
        fontFamily: 'roboto',
        fontSize: 13,
        lineHeight: 1.4,
        color: '#5e5e5e',
        backgroundColor: '#edecec',
        overflow: 'auto'
    }
}

【讨论】：

为什么是componentWillUnmount？
@DhavalJardosh 以便在从 DOM 卸载时发生副作用并清理组件