Reactjs 如何在react网格布局中为gridItem设置lockAspectRatio

我是React新手，我尝试使用React网格布局。我无法创建具有固定纵横比的gridItem（className='block'）。我认为必须使用来自可调整大小组件的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

import React，{Component}来自“React”
从“反应网格布局”导入网格布局；
从“react Draggable”导入Draggable；
导入“../../../node\u modules/react grid layout/css/styles.css”
导入“../../../node_modules/react resizeable/css/styles.css”
导入“./dashboard.css”
类仪表板扩展组件{
render（）{
//布局是一个对象数组，有关更完整的用法，请参见演示
常量布局=[
{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}
];
返回(
你好
推
窗口1
窗口2
窗口3
窗口4
)
}
}
导出默认仪表板