如何在react-grid-layout中为gridItem设置lockAspectRatio

Question

我是React的新手，我尝试过使用react-grid-layout。我不能创建具有固定纵横比的块(className=‘gridItem’)。我认为必须使用来自可调整大小组件的lockAspectRatio属性。

如何使用lockAspectRatio=true创建div (key="a"，"b"，"c"，"d")？

import React, {Component} from 'react'
import GridLayout from 'react-grid-layout';
import Draggable from 'react-draggable';

import '../../../node_modules/react-grid-layout/css/styles.css'
import '../../../node_modules/react-resizable/css/styles.css'
import './dashboard.css'

class Dashboard extends Component {
  render() {
    // layout is an array of objects, see the demo for more complete usage
    const layout = [
      {i: 'a', x: 0, y: 0, w: 6, h: 8, minW: 4, maxW: 8},
      {i: 'b', x: 8, y: 0, w: 6, h: 8, minW: 4, maxW: 8},
      {i: 'c', x: 0, y: 0, w: 6, h: 8, minW: 4, maxW: 8},
      {i: 'd', x: 8, y: 0, w: 6, h: 8, minW: 4, maxW: 8}
    ];


    return (
      <div>
      <Draggable>
        <div className='block button-block'>
          <div className='title'>Hello!</div>
          <div className='content'>
            <button>Push</button>
          </div>
        </div>
      </Draggable>
      <GridLayout
        className="layout"
        layout={layout}
        cols={12}
        rowHeight={30}
        width={1200}
        draggableHandle = '.MyDragHandle'
        draggableCancel = '.MyDragCancel'

      >
        <div key="a" className='block'>
          <div className='MyDragHandle title'>Window 1</div>
          <div className='content'></div>
        </div>
        <div key="b" className='block'>
          <div className='MyDragHandle title'>Window 2</div>
          <div className='content'>
          </div>
        </div>
        <div key="c" className='block'>
          <div className='MyDragHandle title'>Window 3</div>
          <div className='content'></div>
        </div>
        <div key="d" className='block'>
          <div className='MyDragHandle title'>Window 4</div>
          <div className='content'></div>
        </div>
      </GridLayout>
      </div>
    )
  }
}

export default Dashboard

Answer 1

我希望有人能用这个来回答这个问题。我找到了一种方法来实现我自己的调整大小，并在react-grid-layout中保留纵横比：

const handleResize = useCallback(
    (l, oldLayoutItem, layoutItem, placeholder) => {
      const heightDiff = layoutItem.h - oldLayoutItem.h;
      const widthDiff = layoutItem.w - oldLayoutItem.w;
      const changeCoef = oldLayoutItem.w / oldLayoutItem.h;
      if (Math.abs(heightDiff) < Math.abs(widthDiff)) {
        layoutItem.h = layoutItem.w / changeCoef;
        placeholder.h = layoutItem.w / changeCoef;
      } else {
        layoutItem.w = layoutItem.h * changeCoef;
        placeholder.w = layoutItem.h * changeCoef;
      }
    },
    []
  );

没有一种有效的方法可以将lockAspectRatio传递下去。如果有人可以改进我的方法，请随时发表评论！