如何根据页面 url react js 更改背景？

Question

我有一个包含几页的简单应用程序，现在我想根据页面 URL 更改背景颜色 使用反应js，

预期什么？：

当路径名是/movies我想把背景改成红色

这是我目前所拥有的

 import React from 'react'

function Testing() {
const[moviesUrlBackgroundColor, setMoviesUrlBackgroundColor] = useState('green');


const getMoviesUrl = window.location.pathname;


if(getMoviesUrl == '/movies'){
    setMoviesUrlBackgroundColor('red');
}else{
    setMoviesUrlBackgroundColor('green');
}

    return (
        <div>
            <Container style={{backgroundColor:moviesUrlBackgroundColor}}>
            
                Testing
            </Container>
        </div>
    )
}

export default Testing

const Container = styled.div`
    background-color:green
`;

很遗憾，我收到了以下网址

app.js:38323 Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop.

我需要做什么才能完成这项工作？

Answer 1

您应该进行额外检查以确保您已设置背景颜色。您当前的代码导致无限次重新渲染

 import React from 'react'

 function Testing() {
 const[moviesUrlBackgroundColor, setMoviesUrlBackgroundColor] = useState('green');
 const [bgFlag, setbgFlag] = useState(false);


 const getMoviesUrl = window.location.pathname;

 if(!bgFlag){
     setMoviesUrlBackgroundColor(getMoviesUrl == '/movies' ? 'red' : 'green')
     setbgFlag(true)
 }

return (
    <div>
        <Container style={{backgroundColor:moviesUrlBackgroundColor}}>
        
            Testing
        </Container>
    </div>
)
 }

 export default Testing

const Container = styled.div`
    background-color:green
`;

Answer 2

使用useEffect 块，以便您可以有效地执行副作用。

  useEffect(() => {
    if(getMoviesUrl === '/movies'){
      console.log("running")
        setMoviesUrlBackgroundColor('red');
    }else{
        setMoviesUrlBackgroundColor('green');
    }
  },[getMoviesUrl]);

Answer 3

问题是您调用 setMoviesUrlBackgroundColor 时没有包装在 effect 中，这会导致被递归调用。

为了解决这个问题，您只需根据需要简单地设置状态，在这种情况下您的路径名已更改：

React.useEffect(() => {
  if (getMoviesUrl == '/movies'){
    setMoviesUrlBackgroundColor('red');
  } else{
      setMoviesUrlBackgroundColor('green');
  }
}, [getMoviesUrl])

Answer 4

好的，我想我明白了，您在第一个 if 语句中创建了一个无限循环：

if (getMoviesUrl == '/movies') {
    // every time you change state, that causes your component
    // to re-render, and when it re-renders again you're checking
    // changing your state AGAIN, so it's an infinite loop
    setMoviesUrlBackgroundColor('red');
}

我会建议为此使用 react-route 并从参数中获取 url，然后在第一次安装组件时更新 componentDidMount 或 useEffect 钩子上的背景颜色，以防止无限循环。

Answer 5

Window.location.pathname 在每次渲染时都会重置状态，因此需要将其放在 useEffect 挂钩中以防止重新渲染。

此外，这将是一个很好的用例，可以将props 传递给您的样式化组件。 也包含在下面的代码中。

这是我使用该解决方案制作的代码框的链接。 https://codesandbox.io/s/musing-mirzakhani-njmsh?file=/src/random.js:0-620

import React, { useState, useEffect } from "react";
import styled from "styled-components";

const Container = styled.div`
  background: ${(props) => props.backgroundColor || "green"};
`;

const Testing = () => {
  const [moviesUrlBackgroundColor, setMoviesUrlBackgroundColor] = useState(
    "green"
  );

  useEffect(() => {
    const getMoviesUrl = window.location.pathname;
    if (getMoviesUrl === "/movies") {
      setMoviesUrlBackgroundColor("yellow");
    }
  }, [moviesUrlBackgroundColor]);

  return (
    <div>
      <Container backgroundColor={moviesUrlBackgroundColor}>Test</Container>
    </div>
  );
};

export default Testing;

干杯！