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

在React中实现该功能需要创建一个组件，包含两个盒子和一个按钮，并在按钮的点击事件中修改盒子的宽度。具体实现步骤如下：

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

import React, { useState } from "react";

function BoxComponent() {
  const [box1Width, setBox1Width] = useState(200); // 第一个盒子的宽度
  const [box2Width, setBox2Width] = useState(200); // 第二个盒子的宽度

  const handleButtonClick = () => {
    // 修改第一个盒子的宽度
    setBox1Width(box1Width - 50);
    // 修改第二个盒子的宽度
    setBox2Width(box2Width + 50);
  };

  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。