reactjs - 如何使用 Reat-Grid-Layout 使用动态高度/宽度？反应/js

Question

我正在尝试为我正在开发的网站实施拖放操作。它的用途是构建自定义表单。我们有字段和一切，我只需要专注于拖放字段。我找到了这个库。但是，我尝试使用响应式网格布局来实现它，并让它在给定的高度下工作。所以我的字段列表如下所示：

fields: [
    {
      size: 6,
      field: {
        layout: {
          resizeHandles: ['e'],
          x: 0,
          y: 0,
          w: 3,
          h: 0,
          minH: 3,
          minW: 2,
          i: 'firstname-id',
          isDraggable: true,
          isResizable: true,
        },
        id: 'firstname-id',
        text: 'First Name',
        defaultValue: '',
        type: FieldType.Text,
        required: true,
        hiddenText: false,
        textColor: undefined,
        enabled: true,
        visible: true,
        minLength: 4,
        maxLength: 10,
        excludeFromReport: false,
        placeholder: '',
      },
    },
    {
      size: 6,
      field: {
        layout: {
          resizeHandles: ['e'],
          x: 3,
          y: 0,
          w: 3,
          h: 0,
          minH: 3,
          minW: 2,
          i: 'lastname-id',
          isDraggable: true,
          isResizable: true,
        },
        id: 'lastname-id',
        text: 'Last Name',
        defaultValue: '',
        type: FieldType.Text,
        required: true,
        hiddenText: false,
        textColor: undefined,
        enabled: true,
        visible: true,
        minLength: 4,
        maxLength: 10,
        excludeFromReport: false,
        placeholder: '',
      },
    }]

然后，我像这样映射列表：

 <ResponsiveGridLayout
    className="layout"
    rowHeight={1}
    compactType="vertical"
    // resizeHandle={<div className="react-resizable-handle">&lt;|&gt;</div>}
    onLayoutChange={(layout) => layoutChangeHandle(layout)}
    breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
    cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
  >
    {fields.map((field, idx) => {
      return (
        <div key={field.field.id} ref={refs[idx]} data-grid= {field.field.layout }>
          <FieldWrapper
            hiddenText={field.field.hiddenText}
            label={field.field.text}
            textColor={field.field.textColor}
            size={field.field.size}
            required={field.field.required}
            visible={field.field.visible}
            onDimensionChange={(height) => onDimensionChange(height, field.field.id)}
          >
            {getFieldComponent(field.field)}
          </FieldWrapper>
        </div>
      );
    })}
  </ResponsiveGridLayout>

FieldWrapper 是我们制作的一个组件。我将它包裹在一个 div 周围以从 React-Grid-Layout 获取 data-grid 属性。“onDimensionChange”是一个使用自定义钩子获取内容宽度和高度的函数，因此我目前能够提取内容的高度。我的问题是把那个高度放在 RGL 中。

我希望能够获得 FieldWrapper 内容的高度并使用某些东西将新高度分配给布局“h”属性。

问题是当我尝试这样做时，React-Grid-Layout 不会重新渲染.. 知道吗？

标签： reactjsreact-grid-layout