Question

我正在尝试将带有ref标签的div滚动放在Dialog Material-UI Design中我收到错误Cannot read property 'scrollHeight' of undefined

如果我使用Dialog中的代码，那么这里的代码就可以了。

我所要做的就是让滚动div从最后开始

上做了一个例子

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

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

当你定义一个ref时，refs实际上在一个模式中工作分配给全局执行上下文this。所以，你可以使用它们为this.YourRefName。但这些引用并未分配给 this，直到您的组件完全呈现/装载。

在您的情况下，您正在使用<ul>组件的ref作为命名 shoppingListContainer。在方法componentDidMount()方法中项目的根组件，在渲染初始视图后在您的项目中，您可以看到<ul>组件尚未呈现，这就是为什么你提供的引用显示未定义。

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

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定义的组件时。

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

Answer 2

这是因为react无法找到 shoppingListContainer 你可以尝试这个代码，它对我有用。

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() {
    let shoppingListContainer = this.refs.scrolldiv;
    if (shoppingListContainer) {
      shoppingListContainer.style.scrollWidth =
        shoppingListContainer.style.scrollHeight;
    }
  }

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

            <div className="shopping-list" refs="scrolldiv" 
            style={{
              width: 125,
              height: 100,
              overflow: 'auto',
              border: '2px black solid'
            }}>
              <ul>
                <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'));

Dialog Material-UI Scroll从底部开始

2 个答案: