Question

关于React，我有一个非常简单的问题，但是我想看看这种情况下的最佳实践是什么。

如何根据您所在的页面更改主体背景颜色？您是否在每个页面的CSS文件中为主体背景颜色设置了CSS规则，并将其导入组件中？以上工作还是需要使用componentDidMount将CSS类添加到body标签，然后在componentWillUnmout中将其删除？

哪种是首选方式？我注意到，如果您在一个页面中导入了一些CSS，即使导航到新的URL，它也将保持活动状态。所以，也许我需要使用componentDidMount / componentWillUnMount，对吗？

Answer 1

是的，我们可以根据路线更改来更改background-color中的body。使用componentWillReceiveProps或componentDidUpdate生命周期方法确定您所在的页面并获取路由名称使用props.location.pathname提供的react-router-dom。如果您的路由由params组成，则只需将props.location.pathname替换为props.match.params.customparam

componentDidMount(){
 document.body.style.background = "red";
}

componentWillReceiveProps(nextProps){
 if(this.props.location.pathname !== nextProps.location.pathname){
   const currentRoute = nextProps.location.pathname; 
    switch(currentRoute){
      case "\a":  document.body.style.background = "blue";
               break;
      case "\b":  document.body.style.background = "green";
               break;
      default : document.body.style.background = "red";

    }
 }
}

在React中设置主体背景颜色

1 个答案: