React resizable 只调整盒子的宽度，而不是高度

Question

我有一个 React-mui draggable dialog component on which I am using 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。

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

Answer 1

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

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

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

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

添加re-produce问题后更新

实际上，根据我上次的回答，现在在 re-production 沙盒中覆盖了你的 height，我删除了 iframe 标签，一切正常，你传递了一个 height="100%" 属性添加到您的 iframe 标签，它可以防止高度变化。此外，您将 minConstraints={[300, 500]} 传递给 ResizableBox 组件，因此它的高度不能小于 500px.

Answer 2

你可以绑定window的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 属性 - 为此，您可以选择控制可拖动组件的位置。 Translate/Set X 和 Y 根据需要在调整大小时保持其位置。请注意，x & y state & state setters 应该驻留在这些组件中的公共 parent/ancestor 上，您将作为道具传递这些组件。

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 等约束以清楚地显示示例）

React resizable 只调整盒子的宽度，而不是高度

React resizable only resizing the width of the box, not the height

javascript

reactjs

react-material

添加re-produce问题后更新