javascript - React resizable 仅调整框的宽度，而不是高度

Question

我有一个 React-mui draggable dialog我正在使用的组件resizable box :

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 可用 here .
仅供引用，由于某种原因，有时会出现导入失败消息，但如果您刷新代码框的页面，一切正常。

Answer 1

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

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

当您这样做时，可拖动元素将不会更新其 CSS transform: translate调整大小时不再使用属性 - 为此，您可以选择控制 Draggable 组件的位置。根据需要平移/设置 X 和 Y 以在调整大小时保留其位置。请注意 x & y状态和状态 setter 应该驻留在这些组件中的共同父/祖先上，您将作为 Prop 传递下来。

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 之类的限制，以清楚地显示示例)