React-resizable/react-resizable-box 使用注意事项（小白踩坑）

应用步骤：

1. npm install --save react-resizable 安装到当前项目中
2. 安装过后可先执行一下 npm install 有可能会出现'react-scripts' 不是内部或外部命令，也不是可运行的程序或批处理文件。
3. 在app.js中引用

import { Resizable, ResizableBox } from 'react-resizable';

1.  在render中使用该组件

<Resizable className="box"  axis='y' height={this.state.height} width={this.state.width} onResize={this.onResize}>

            <div className="box" style={{ width: this.state.width + 'px', height: this.state.height + 'px' }}>

              <span className="text">{"Raw use of <Resizable> element. 200x200, no constraints."}</span>

            </div>
</Resizable>

这一切看似已经完成了，但是需要我们把react-resizable中的styles.css引入或者复制到当前app.css中才能使用

import '../node_modules/react-resizable/css/styles.css';

1. npm run start即可看到效果

 

添加属性

按照指定宽高比缩放：

lockAspectRatio={16/9}

指定x、y坐标轴方向缩放

axis="x"   //x,y,both

缩放最小/大值

minConstraints={[10,10]}

maxConstraints={[Infinity, Infinity]}

缩放控制函数

onResizeStop: _propTypes2.default.func,

onResizeStart: _propTypes2.default.func,

onResize: _propTypes2.default.func,

其他属性请参考官方网站：

https://www.npmjs.com/package/react-resizable/v/1.7.5

https://react.ctolib.com/react-resizable-box.html#articleHeader11

完整代码（app.js）//我是复制到app.css

 

import React, { Component } from 'react';
import { Resizable, ResizableBox } from 'react-resizable';
import './App.css';
class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      width: 200,
      height: 200
    }
  }
  onResize = (event, { element, size }) => {
    this.setState({ width: size.width, height: size.height });
  };
  render() {
    return (
      <div>
          <Resizable className="box"  axis="x"  minConstraints={[200,200]} height={this.state.height} width={this.state.width} onResize={this.onResize}>
            <div className="box" style={{ width: this.state.width + 'px', height: this.state.height + 'px' }}>
              <span className="text">{"Raw use of <Resizable> element. 200x200, no constraints."}</span>
            </div>
          </Resizable>
      
      </div>
    )
  }
}

export default App;

//小白才开始搞这个，有不对的请指教