javascript - Dialog Material-UI 从底部开始滚动

Question

我正在尝试将带有 ref 标签的 div 滚动放入 Dialog Material-UI Design 我收到一条错误消息，提示 Cannot read property 'scrollHeight' of undefined

如果我在 Dialog 之外使用我的代码，它工作正常，这是示例

Working Example

我要做的就是让滚动 div 从末尾开始

我在 Not working with Dialog 上做了一个例子

import React from 'react';
import { render } from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      open: false,
    }
  }

  handleOpen = () => {
    this.setState({ open: true });
  };
  handleClose = () => {
    this.setState({ open: false });
  };
  componentDidMount() {
    this.shoppingListContainer.scrollTop = this.shoppingListContainer.scrollHeight;
  }

  render() {
    return (
      <MuiThemeProvider>
      <div id="scrolldiv">
          <RaisedButton label="Alert" onClick={this.handleOpen} />
        <Dialog
          title="Dialog With Actions"
          modal={false}
          open={this.state.open}
          onRequestClose={this.handleClose}
        >
        <div>
        <ul style={{
          width: 115,
          height: 100,
          overflow: 'auto',
          border: '2px black solid'
        }}
          ref={(shoppingListContainer) => { this.shoppingListContainer = shoppingListContainer; }}
        >
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>

        </ul>
        </div>
          </Dialog>
      </div>
      </MuiThemeProvider>
    );
  }
}

render(<App />, document.getElementById('root'));

Answer 1

这是一个可能的解决方案。

refs 实际上以一种模式工作，当你定义一个 ref 时，它是分配给全局执行上下文 this .这样，您就可以使用他们作为this.YourRefName .但是这些 refs 没有分配给 this , 直到您的组件完全呈现/安装。

In your case, you are using a ref of the <ul> component as named shoppingListContainer. in the method componentDidMount() method of the root component of your project, After rendeing the intial view of your project, you can see the <ul> component is not rendered yet, That's why the ref you provided is showing undefined.

在这种情况下，您确实将模块方法应用于组件层次结构。以下是根据您的实现运行的代码:

import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import Dialog from 'material-ui/Dialog';
import RaisedButton from 'material-ui/RaisedButton';

class ListContainer extends React.Component {
  scrollToBottom = () => {
    this.listContainer.scrollTop = this.listContainer.scrollHeight;
  }

  componentDidMount() {
    this.scrollToBottom();
  }

  componentDidUpdate() {
    this.scrollToBottom();
  }

  render() {
    return (
      <ul style={{
        width: 115,
        height: 100,
        overflow: 'auto',
        border: '2px black solid'
      }}
        ref={(element) => { this.listContainer = element; }}
      >
        <li>Instagram</li>
        <li>WhatsApp</li>
        <li>Oculus</li>
        <li>Instagram</li>
        <li>WhatsApp</li>
        <li>Oculus</li>
        <li>Instagram</li>
        <li>WhatsApp</li>
        <li>Oculus</li>
        <li>Instagram</li>
        <li>WhatsApp</li>
        <li>Oculus</li>

      </ul>
    )
  }

}

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      open: false,
    }
  }

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

  render() {
    return (
      <MuiThemeProvider>
        <div id="scrolldiv" ref='listC' >
          <RaisedButton label="Alert" onClick={this.handleOpen} />
          <Dialog
            title="Dialog With Actions"
            modal={false}
            open={this.state.open}
            onRequestClose={this.handleClose}
          >
            <div>
              <ListContainer />
            </div>
          </Dialog>
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

在上面的代码中，我破坏了组件结构，以确保 reactjs 将在渲染具有 ref 定义的组件时访问 ref。

它实际上会使您的方法易于理解和维护。