react盒子放大缩小

React 中的盒子放大缩小通常是指通过CSS样式或者JavaScript库如React-Scale、react-resizable等来实现组件尺寸的变化。在React中，你可以直接操作元素的`style`属性或者使用ref来间接改变DOM元素的尺寸。

例如，如果你有一个使用ref绑定了的div元素：

import React, { useRef } from 'react';

functionResizableBox() {
  const boxRef = useRef(null);

  // 放大或缩小函数
  const resize = (size) => {
    boxRef.current.style.transform = `scale(${size})`;
  };

  return (
    <div ref={boxRef} style={{ width: '100px', height: '100px', backgroundColor: 'blue' }}>
      可点击并放大缩小
      <button onClick={() => resize(1.5)}>放大</button>
      <button onClick={() => resize(1)}>恢复原大小</button>
    </div>
  );
}

在这个例子中，当用户点击"放大"按钮，会调用`resize(1.5)`将盒子放大，而点击"恢复原大小"则调用`resize(1)`使其还原到原始大小。