Javascript 当内容太大时，对话框的第一次定位错误

我正在将material ui ^0.20与react ^16.2一起使用，当我第一次显示

对话框时遇到问题，该对话框嵌入了内容过多的
组件

以下是显示问题的图片：


这就是应该显示的内容（在关闭
对话框并再次显示之后，或者在调整窗口大小之后，等等）


下面是一些再现问题（，）的源代码：

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“材料界面/对话框”导入对话框；
从“物料界面/RaisedButton”导入RaisedButton；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“材质ui/styles/GetMuiteme”导入GetMuiteme；
类BuggyComponent扩展组件{
render（）{
返回
}
}
类MyComponent扩展了React.Component{
状态={
开：错，
};
handleOpen=（）=>{
this.setState（{open:true}）；
};
handleClose=（）=>{
this.setState（{open:false}）；
};
render（）{
返回(
);
}
}
导出默认类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
名称：“反应”
};
}
render（）{
返回(
);
}
}

我能做些什么来避免这个问题吗？从我观察到的情况来看，对话框中没有组件，但整个对话框作为一个组件似乎可以解决这个问题，但这不是很方便，也不总是可能的。
这里发生的是：
弹出窗口打开，材料界面尝试将其居中，并将其居中，尝试计算出内容的高度。此时，图像不可用，因此内容（图像）没有高度

图像加载。图像现在有一个高度，但对话框已经定位，所以这没有帮助

您可以尝试预加载图像（这基本上是更新后发生的事情）。这样做的一种黑客方式如下：

<RaisedButton label="Buggy Dialog" onClick={this.handleOpen} />
<img src="https://upload.wikimedia.org/wikipedia/commons/b/be/Random_pyramids.jpg" style={{width: '0', height: '0', visibility: 'hidden'}} />



这将在不可见的img标记中加载图像，以便在对话框打开时已加载图像。问题在于，无法保证在用户单击按钮时加载图像

另一种方法是检测图像何时加载，然后重新定位对话框。这是可行的，但缺点是一旦加载图像，对话框就会跳转，这可能是个问题，也可能不是

class BuggyComponent extends Component {
    reRender() {
        this.props.dialog.forceUpdate();
    }

    render() {
        return <img onLoad={() => this.reRender()} src="https://upload.wikimedia.org/wikipedia/commons/b/be/Random_pyramids.jpg" />
    }
}

<Dialog
    ref="dialog"
    repositionOnUpdate
    title="Dialog"
    modal={false}
    open={this.state.open}
    onRequestClose={this.handleClose}
>
    <BuggyComponent dialog={ this.refs.dialog} />
</Dialog>

类BuggyComponent扩展组件{
重新渲染器（）{
this.props.dialog.forceUpdate（）；
}
render（）{
返回
}
}

第三个选项仅在图像高度已知时有效，即显式设置img标记的高度。这还可以防止在加载图像时需要重新渲染，但需要事先知道大小

第四个选项是更改打开模式的函数，以便该函数在尝试打开模式之前预加载图像（如果需要）

第五个也是很有希望的工作选项是使自定义组件滚动固定大小。这解决了未知高度的问题，但要求您确定什么是好的固定高度，这取决于内容是否合理。为了避免过于担心屏幕尺寸，高度以vh表示

class BuggyComponent extends Component {
    render() {
        return <div style={ {height: '70vh', overflow: 'scroll'} }>
            <img src="https://upload.wikimedia.org/wikipedia/commons/b/be/Random_pyramids.jpg" />
        </div>
    }
}

类BuggyComponent扩展组件{
render（）{
返回
}
}
这里发生的是：
弹出窗口打开，材料界面尝试将其居中，并将其居中，尝试计算出内容的高度。此时，图像不可用，因此内容（图像）没有高度

图像加载。图像现在有一个高度，但对话框已经定位，所以这没有帮助

您可以尝试预加载图像（这基本上是更新后发生的事情）。这样做的一种黑客方式如下：

<RaisedButton label="Buggy Dialog" onClick={this.handleOpen} />
<img src="https://upload.wikimedia.org/wikipedia/commons/b/be/Random_pyramids.jpg" style={{width: '0', height: '0', visibility: 'hidden'}} />



这将在不可见的img标记中加载图像，以便在对话框打开时已加载图像。问题在于，无法保证在用户单击按钮时加载图像

另一种方法是检测图像何时加载，然后重新定位对话框。这是可行的，但缺点是一旦加载图像，对话框就会跳转，这可能是个问题，也可能不是

class BuggyComponent extends Component {
    reRender() {
        this.props.dialog.forceUpdate();
    }

    render() {
        return <img onLoad={() => this.reRender()} src="https://upload.wikimedia.org/wikipedia/commons/b/be/Random_pyramids.jpg" />
    }
}

<Dialog
    ref="dialog"
    repositionOnUpdate
    title="Dialog"
    modal={false}
    open={this.state.open}
    onRequestClose={this.handleClose}
>
    <BuggyComponent dialog={ this.refs.dialog} />
</Dialog>

类BuggyComponent扩展组件{
重新渲染器（）{
this.props.dialog.forceUpdate（）；
}
render（）{
返回
}
}

第三个选项仅在图像高度已知时有效，即显式设置img标记的高度。这还可以防止在加载图像时需要重新渲染，但需要事先知道大小

第四个选项是更改打开模式的函数，以便该函数在尝试打开模式之前预加载图像（如果需要）

第五个也是很有希望的工作选项是使自定义组件滚动固定大小。这解决了未知高度的问题，但要求您确定什么是好的固定高度，这取决于内容是否合理。为了避免过于担心屏幕尺寸，高度以vh表示

class BuggyComponent extends Component {
    render() {
        return <div style={ {height: '70vh', overflow: 'scroll'} }>
            <img src="https://upload.wikimedia.org/wikipedia/commons/b/be/Random_pyramids.jpg" />
        </div>
    }
}

类BuggyComponent扩展组件{
render（）{
返回
}
}
实际上，这种情况发生在文本内容上，我只是使用了图像，因为它更容易复制。也许问题与我的情况类似，因为某些原因，MaterialUI无法正确计算内容大小。但让我有点担心的是，只有当数据位于对话框中的外部组件中时，才会发生这种情况，而不是当数据直接位于对话框中时