如何使用react使不同的网页具有不同的背景(刷新后也要维护背景)

Question

Home.js文件

const Home = () => 
{   
var navigate = useNavigate();
const move = () => {
navigate("/builder");
var change = document.getElementsByTagName('html');
change[0].style.backgroundImage = "linear-gradient(to top, #370514, #722423, #a95026, #d3861d, #ebc512)";
}
return(
<div className="fullpage">
<div className="middle"> <h1>Undirected Graph Maker</h1>
<div className="aligner">
<button type="button" onClick={move} className="btn">Unweighted</button>
<button type="button" onClick={move} className="btn">Weighted</button>
</div>
</div>
</div>
);
}

export default Home;

这只改变按钮点击的背景，不保留它

Answer 1

我们已经声明了一个变量来存储div的初始背景。这个变量被分配给React组件状态background。当状态更新按钮时，点击。它还更新了div的背景。

function Home() {
const initialBackgroundColor =
'radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%)';
const [background, setBackground] = useState(initialBackgroundColor);
return (
<div className="fullpage" style={{ background }}>
<div className="middle">
<h1>Undirected Graph Maker</h1>
<div className="aligner">
<button
type="button"
onClick={() => {
setBackground(initialBackgroundColor);
}}
className="btn"
>
Unweighted
</button>
<button
type="button"
onClick={() => {
setBackground(
'linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,153,45,1) 100%)'
);
}}
className="btn"
>
Weighted
</button>
</div>
</div>
</div>
);
}
export default Home