react点击按钮使得一个div宽度过渡变化

您可以使用React Hook来实现点击按钮使得一个div宽度过渡变化的效果。可以使用`useState` Hook来定义一个布尔变量，来记录按钮是否被点击。然后根据按钮的状态，动态地设置div的一个CSS类。CSS类中可以使用`transition`属性来定义宽度过渡变化的效果。以下是具体的实现方式：

import React, { useState } from 'react';
import './styles.css'; // 引入CSS文件

function App() {
  const [isClicked, setIsClicked] = useState(false);

  const handleClick = () => {
    setIsClicked(!isClicked);
  };

  const divClass = isClicked ? 'expanded' : ''; // 根据按钮状态设置div的CSS类

  return (
    <div>
      <button onClick={handleClick}>点击按钮</button>
      <div className={`box ${divClass}`}></div>
    </div>
  );
}

在上面的代码中，我们定义了一个`box` CSS类，并且根据按钮的状态，动态地将`expanded` CSS类添加到`box`类中。在`styles.css`文件中，我们可以定义`transition`属性来实现宽度过渡变化的效果。

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 0.5s ease-in-out; /* 定义宽度过渡变化的效果 */
}

.box.expanded {
  width: 200px;
}

当点击按钮时，`isClicked`状态会切换为`true`或`false`，从而动态地将`expanded` CSS类添加或移除。这样就能够实现点击按钮使得一个div宽度过渡变化的效果了。