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

显然，react-resizable 使用内联 CSS 来处理框的 width 和 height，对于你的问题，我模拟了这个问题，注意下面的截图来自 Google chrome devTools：

react-resizable-box 有一个 important 标志，它会覆盖内联高度值，因此在视图中，我有以下行为：

你的信息不够，所以我不能直接说出你的问题原因，但很可能 CSS 覆盖是这个问题的根本原因。

因此，请检查您项目中的 resizable-box 并寻找 CSS 覆盖。

更新添加后重新产生问题

实际上，根据我的最后一个答案，现在在重新生产沙箱中覆盖了您的height，我删除了iframe 标签，一切正常，您将height="100%" 属性传递给您的iframe 标签它可以防止高度的变化。此外，您将minConstraints={[300, 500]} 传递给ResizableBox 组件，因此它的高度不能小于500px。

Answer 2

你可以绑定窗口的resize事件，计算新的高宽传给你的resizable-box

object.addEventListener("resize", function() {
//Here you can write logic to apply resizing on the resizable-box
});

Answer 3

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

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

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

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