当前位置: 首页 > 工具软件 > react-box > 使用案例 >

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

佘单鹗
2023-12-01

应用步骤:

  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;

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

 类似资料: