Как установить lockAspectRatio для gridItem в response-grid-layout - PullRequest
Новая
       5

Как установить lockAspectRatio для gridItem в response-grid-layout

1 голос
/ 04 апреля 2020

Я новичок в React, и я попытался использовать ответ-grid-layout. Я не могу создать gridItem (className = 'block') с фиксированным соотношением сторон. Я думаю, что необходимо использовать реквизит lockAspectRatio из компонента Resizable.

Как создать div (key = "a", "b", "c", "d") с lockAspectRatio = true? 

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
...