使用react写四个框点击可换背景颜色

以下是使用React编写四个框点击可换背景颜色的示例代码：

import React, { useState } from 'react';
import './App.css';

function App() {
  const [color1, setColor1] = useState('white');
  const [color2, setColor2] = useState('white');
  const [color3, setColor3] = useState('white');
  const [color4, setColor4] = useState('white');

  const handleClick1 = () => {
    setColor1(color1 === 'white' ? 'red' : 'white');
  };

  const handleClick2 = () => {
    setColor2(color2 === 'white' ? 'blue' : 'white');
  };

  const handleClick3 = () => {
    setColor3(color3 === 'white' ? 'green' : 'white');
  };

  const handleClick4 = () => {
    setColor4(color4 === 'white' ? 'purple' : 'white');
  };

  return (
    <div className="App">
      <div className="box" style={{ backgroundColor: color1 }} onClick={handleClick1}></div>
      <div className="box" style={{ backgroundColor: color2 }} onClick={handleClick2}></div>
      <div className="box" style={{ backgroundColor: color3 }} onClick={handleClick3}></div>
      <div className="box" style={{ backgroundColor: color4 }} onClick={handleClick4}></div>
    </div>
  );
}

export default App;

在上面的代码中，我们使用了React的useState钩子来定义四个颜色变量。每个框都有一个onClick事件处理程序，当框被点击时，它将调用相应的handleClick函数来更改该框的背景颜色。我们使用CSS将框呈现为方形，并使用style属性将背景颜色设置为相应的颜色变量。最后，我们将四个框呈现为一个容器，并将其传递给App组件的return语句。