javascript - 当内容太大时，对话的第一定位不好

Question

我正在使用material-ui^0.20和react^16.2，当第一次显示一个嵌入了太多内容的Component的Dialog时，我遇到了问题。

这是显示问题的图片:

这就是应该显示的内容(在关闭Dialog并第二次显示它之后，或者在调整窗口大小之后等)

这里是一些重现问题的源代码( online demo here 、 and the source code ):

import React, { Component } from 'react';
import { render } from 'react-dom';

import Dialog from 'material-ui/Dialog';
import RaisedButton from 'material-ui/RaisedButton';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

class BuggyComponent extends Component {
  render() {
    return <img src="https://upload.wikimedia.org/wikipedia/commons/b/be/Random_pyramids.jpg" />
  }
}

class MyComponent extends React.Component {
  state = {
    open: false,
  };

  handleOpen = () => {
    this.setState({open: true});
  };

  handleClose = () => {
    this.setState({open: false});
  };

  render() {

    return (
      <div>
        <RaisedButton label="Buggy Dialog" onClick={this.handleOpen} />
        <Dialog
          title="Dialog"
          modal={false}
          open={this.state.open}
          onRequestClose={this.handleClose}
        >
          <BuggyComponent />
        </Dialog>
      </div>
    );
  }
}

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <MuiThemeProvider muiTheme={getMuiTheme({})}>
        <MyComponent /> 
      </MuiThemeProvider>
    );
  }
}

有什么办法可以避免这个问题吗？据我观察，对话框内没有组件，但整个对话框作为一个组件似乎可以纠正这个问题，但这不是很方便，而且并不总是可行。

Answer 1

这里发生的事情是这样的: 弹出窗口打开，material ui 尝试将其居中并居中，它尝试计算出内容的高度。此时，图像不可用，因此内容(图像)没有高度。

图像加载。图像现在有高度，但对话框已经定位，因此这没有帮助。

您可以尝试预加载图像(这基本上是更新后发生的事情)。一种黑客式的方法是这样的:

<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>

仅当图像高度已知时才有效的第三个选项是显式设置 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>
    }
}