怎么样用react实现 点击按钮 一个盒子的宽度缩小多少后另一个挨着的盒子的宽度变大多少,再次点击时复原

为了实现点击按钮一个盒子的宽度缩小多少后另一个挨着的盒子的宽度变大多少，并在再次点击时复原，我们可以在React组件中使用useState来保存盒子的宽度，使用一个布尔值来控制盒子宽度的缩小和放大，具体实现步骤如下：

1. 创建一个React组件，包含两个盒子和一个按钮，代码如下：

import React, { useState } from "react";

function BoxComponent() {
  const [box1Width, setBox1Width] = useState(200); // 第一个盒子的宽度
  const [box2Width, setBox2Width] = useState(200); // 第二个盒子的宽度
  const [isShrink, setIsShrink] = useState(true); // 是否缩小

  const handleButtonClick = () => {
    // 如果已经缩小，则放大
    if (isShrink) {
      setBox1Width(box1Width - 50);
      setBox2Width(box2Width + 50);
      setIsShrink(false);
    } else { // 如果已经放大，则缩小回原来的宽度
      setBox1Width(200);
      setBox2Width(200);
      setIsShrink(true);
    }
  };

  return (
    <div>
      <div
        style={{
          width: box1Width + "px",
          height: "100px",
          backgroundColor: "red",
          display: "inline-block"
        }}
      ></div>
      <div
        style={{
          width: box2Width + "px",
          height: "100px",
          backgroundColor: "blue",
          display: "inline-block"
        }}
      ></div>
      <button onClick={handleButtonClick}>Click me</button>
    </div>
  );
}

export default BoxComponent;

2. 在父组件中引入该组件，代码如下：

import React from "react";
import BoxComponent from "./BoxComponent";

function App() {
  return (
    <div>
      <BoxComponent />
    </div>
  );
}

export default App;

这样，当点击按钮时，第一个盒子的宽度会缩小50，第二个盒子的宽度会变大50。再次点击按钮时，两个盒子的宽度会复原。