React resizing 仅调整框的宽度，而不调整高度

Question

我有一个React-mui 可拖动对话框组件，我在其中使用可调整大小的框：

return (
  <StyledDialog
    open={open}
    classes={{root: classes.dialog, paper: classes.paper}}
    PaperComponent={PaperComponent}
    aria-labelledby="draggable-dialog"
  >
    <ResizableBox
      height={520}
      width={370}
      minConstraints={[300, 500]}
      maxConstraints={[Infinity, Infinity]}
      className={classes.resizable}
    >
      <DialogContent classes={{root: classes.dialogContent}} id="draggable-dialog">
        <IconButton className={classes.clearIcon} aria-label="Clear" onClick={onClose}>
          <ClearIcon/>
        </IconButton>
        <iframe
          src={hjelpemiddel.url}
          title={hjelpemiddel.navn}
          width="100%"
          height="100%">
        </iframe>
      </DialogContent>
    </ResizableBox>
  </StyledDialog>
);

我想调整iframe对话框内部的大小以及ResizableBox. 但是，似乎我只能调整 的宽度ResizableBox，而不能调整框的高度，至少最大高度似乎是最初设置的高度。我该如何解决这个问题，以便我也可以调整高度？

更新

Codesanbox 可在此处获取。

仅供参考，由于某种原因，有时会出现导入失败消息，但如果刷新codesandbox的页面，一切都会正常。

Answer 1

在您的 CodeSandBox 中，根据我的测试，拖动和调整大小的事件是同时触发的。您可以使用cancel的 属性，react-draggable以便当调整大小手柄是与之交互的组件时不会发生拖动。

<Draggable
  cancel={".react-resizable-handle"}
    ...

当您执行此操作时，可拖动元素transform: translate在调整大小时将不再更新其 CSS 属性 - 为此，您可以选择控制可拖动组件的位置。根据需要平移/设置 X 和 Y，以在调整大小时保留其位置。请注意，x& ystate & state setter 应该驻留在这些组件中的共同父级/祖先上，您将作为 props 向下传递。

export default function App() {
  // have the source of truth for the positions on a common parent/ancestor
  const [x, setX] = React.useState(0);
  const [y, setY] = React.useState(0);

  return (
    <div className="App">
      <PDFDialog x={x} y={y} setX={setX} setY={setY} />
    </div>
  );
}

...

class PDFDialog extends React.Component {
  state = {
    open: true
  };

  render() {
    const { open } = this.state;
    const { classes } = this.props;

    return (
      <StyledDialog
        open={open}
        classes={{ root: classes.dialog, paper: classes.paper }}
        PaperComponent={PaperComponent}
        aria-labelledby="draggable-dialog"
        PaperProps={{
          x: this.props.x,
          y: this.props.y,
          setX: this.props.setX,
          setY: this.props.setY
        }}
      >
        <ResizableBox
          height={520}
          width={370}
          minConstraints={[300, 500]}
          maxConstraints={[Infinity, Infinity]}
          className={classes.resizable}
          onResize={(e) => {
            if (e.movementX !== 0) {
              this.props.setX((prev) => prev + e.movementX);
            } else if (e.movementY !== 0) {
              this.props.setY((prev) => prev + e.movementY / 2);
            }
          }}
        ></ResizableBox>

        ...

// refactored draggable component:
<Draggable
  position={{ x: x, y: y }}
  cancel={".react-resizable-handle"} // <-- cancel the dragging if resize is interacted with
  onDrag={(e) => {
    if (e.movementX !== 0) {
      setX((prev) => prev + e.movementX);
    }
    if (e.movementY !== 0) {
      setY((prev) => prev + e.movementY);
    }
  }}
>
  <Paper {...props} />
</Draggable>

（在我的 CodeSandBox 上，我已经摆脱了最小值等限制height，width以清楚地显示示例）