从react-rnd开始，React组件会自动调整大小

Question

我有一个反应模式，我试图从底部开始调整大小。在当前状态下，react组件会调整大小，但在启动时会缩小到默认大小。下面是我的代码。我以为我需要在某个地方开始设置调整大小，但遇到麻烦。我在做什么错了？

const ModalDynamic = props => {
  let hasFooter = React.Children.count(props.children) > 1;

  if (props.display) {
    return (
      <React.Fragment>
        <Rnd
          className="modal-dynamic"
          lockAspectRatioExtraHeight={56}
          lockAspectRatio={false}
          minHeight={150}
          minWidth={320}
          dragHandleClassName="rnd-header"
          enableResizing={
            props.resizing === true
              ? {
                  top: true,
                  right: true,
                  bottom: true,
                  left: true,
                  topRight: true,
                  bottomRight: true,
                  bottomLeft: true,
                  topLeft: true
                }
              : {
                  top: false,
                  right: true,
                  bottom: true,
                  left: false,
                  topRight: false,
                  bottomRight: false,
                  bottomLeft: false,
                  topLeft: false
                }
          }
          disableDragging={!props.enableDragging}
          default={{
            x: props.defaultX,
            y: props.defaultY,
            width: props.defaultWidth,
            height: props.defaultHeight
          }}
        >
          <div
            className={
              props.enableDragging === false
                ? "rnd-header rnd-header-no-drag" + props.headerClass
                : "rnd-header " + props.headerClass
            }
          >
            <h2>{props.title}</h2>
            <span className="rnd-dismiss" onClick={props.dismissAction}>
              <i className="fa fa-times" />
            </span>
          </div>
          <div
            className={
              hasFooter === false ? "rnd-body rnd-no-footer" : "rnd-body"
            }
          >
            {props.children[0] ||
              React.Children.only(props.children) ||
              "Missing Children"}
          </div>
          {hasFooter && props.children[1]}
        </Rnd>
        {props.dimBackground && (
          <div
            style={{
              position: "absolute",
              zIndex: "9000",
              height: "100vh",
              width: "100vw",
              backgroundColor: "rgba(0,0,0,0.7)"
            }}
          />
        )}
      </React.Fragment>
    );
  } else {
    return null;
  }
};

ModalDynamic.defaultProps = {
  display: true,
  headerClass: "",
  dimBackground: false,
  enableResizing: true,
  defaultX: 0,
  defaultY: 0,
  enableDragging: true
};

export default ModalDynamic;

我怎么称呼

  render() {
    return (
      <ModalDynamic
        defaultWidth={1200}
        defaultHeight={400}
        defaultX={100}
        defaultY={100}
        display={this.props.showPartsModal}
        title={
          "Parts for Invoice: " +
          (this.props.selectedHistory[0] !== undefined
            ? this.props.selectedHistory[0].invoice_number
            : "N/A")
        }
        dealerPath="[ 12345 ] Some Dealer"
        dismissAction={this.props.dismissAction}
      >