javascript - 在 React 中将页面的背景颜色（可以随时更改）调整为按钮的背景颜色

Question

我有一个ArbitraryBtn在每次点击时将页面颜色更改为随机颜色：

import React from 'react';

export const changeToArbitraryColor = () =>
    (document.body.style.backgroundColor =
        '#' + Math.floor(Math.random() * 16777215).toString(16));

const ArbitraryBtn = () => (
    <button
        className='arbitrary-btn'
        onMouseDown={changeToArbitraryColor}></button>
);

export default ArbitraryBtn;

我也有这个AppendBtn。我希望与AppendBtn文档页面具有相同的背景颜色。所以我在style属性上做了这个：

import React from 'react';

const AppendBtn = () => {
    return (
        <button
            className='append-btn'
            style={{ backgroundColor: document.body.style.backgroundColor }}>
            +
        </button>
    );
};

export default AppendBtn;

但是这样做的问题是它只在安装组件时采用页面的背景颜色，并且当我单击 ArbitraryBtn 并更改页面的背景颜色时，AppendBtn 不适应新的页面的背景颜色了。

我尝试导出一个函数（以便我可以在 changeToArbitraryColor 函数中调用此函数），该函数将 useRef 钩子用于style属性。但是由于 React Hook "useRef" 不能在顶层调用，并且 React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用，并且 'import' 和 'export' 可能只出现在顶层，它没有不行。

这是我使用 JavaScript 时的 gif（但我想在 React 中这样做）：

左侧的按钮是 ，右侧的按钮ArbitraryBtn是AppendBtn。我如何在 React 中实现这一点？请帮忙。

标签： javascriptreactjs

Answer 1

以下是如何实现这一目标：

想法是一旦点击ArbitraryBtn. 同时我将状态传递给子组件isClicked。现在每次isClicked更改/切换useEffect()子组件中的我都会被调用。那时，我正在AppendBtn使用普通的javascript设置与正文背景相同的背景:)

Codesandbox 演示：

https://codesandbox.io/s/button-issue-h6h2l?file=/src/App.js

完整代码：

const { useEffect, useRef, useState }=  React;

function App() {
  const [isClicked, setIsClicked] = useState(true);
  const changeToArbitraryColor = () => {
    document.body.style.backgroundColor =
      "#" + Math.floor(Math.random() * 16777215).toString(16);
    setIsClicked(!isClicked);
  };

  return (
    <div className="App">
      <ArbitraryBtn changeToArbitraryColor={changeToArbitraryColor} />
      <AppendBtn isClicked={isClicked} />
    </div>
  );
}

const ArbitraryBtn = ({ changeToArbitraryColor }) => (
  <button className="arbitrary-btn" onClick={changeToArbitraryColor}>
    I am here
  </button>
);

const AppendBtn = ({ isClicked }) => {
  const childRef = useRef(null);
  console.log("Here I am");
  console.log(document.body.style.backgroundColor);
  useEffect(() => {
    childRef.current.style.backgroundColor =
      document.body.style.backgroundColor;
  });
  return (
    <button className="append-btn" ref={childRef}>
      + I am the Append Button
    </button>
  );
};


ReactDOM.render(<App/>,document.querySelector('#root'))

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>