Javascript 在react中，当孩子发生变化时，如何引起注意？

我正在创建一个名为

Scrollable

的类，它可以在子元素的宽度/高度超过某个值时进行滚动。这是代码

import React, { Component } from 'react';

const INITIAL = 'initial';

class Scrollable extends Component {
  render() {
    let outter_styles = {
      overflowX: (this.props.x? 'auto': INITIAL),
      overflowY: (this.props.y? 'auto': INITIAL),
      maxWidth: this.props.width || INITIAL,
      maxHeight: this.props.height || INITIAL,
    };
    return (
      <div ref={el => this.outterEl = el} style={outter_styles}>
        <div ref={el => this.innerEl = el}>
          {this.props.children}
        </div>
      </div>
    );
  }
};

export default Scrollable;

// To use: <Scrollable y><OtherComponent /></Scrollable>

但是，只有当

this.props.children

高度发生变化时，才需要调用此函数。有没有办法实现这一目标

---

提前谢谢。

我想推荐一个套餐。它不是React-specific，但是您可以很容易地围绕它构建一个高阶组件，或者将可滚动组件与之集成。

现在我有了解决这个问题的想法

因为我正在使用react redux。问题是，我无法在此

可滚动

组件上使用生命周期挂钩，因为更新内容时，

此.props.children

可能不一定会更改

实现这一点的一种方法是使

滚动

组件知道redux

状态

中的相应值。因此，当相关值更新时，我们可以向下滚动到底部

可滚动组件：

import React, { Component } from 'react';

const INITIAL = 'initial';

class Scrollable extends Component {
  componentWillUpdate(){
    if(this.props.autoScroll){
      // only auto scroll when the scroll is already at bottom.
      this.autoScroll = this.outterEl.scrollHeight - this.outterEl.scrollTop - Number.parseInt(this.props.height) < 1;
    }
  }

  componentDidUpdate(){
    if(this.autoScroll) this.outterEl.scrollTop = this.outterEl.scrollHeight;
  }

  render() {
    let styles = {
      overflowX: (this.props.x? 'auto': INITIAL),
      overflowY: (this.props.y? 'auto': INITIAL),
      maxWidth: this.props.width || INITIAL,
      maxHeight: this.props.height || INITIAL,
    };
    return (
      <div ref={el => this.outterEl = el} style={styles}>
        <div ref={el => this.innerEl = el}>
            {this.props.children}
        </div>
      </div>
    );
  }
};

export default Scrollable;

---

这样，当相应的状态更改时，

可滚动的

的生命周期挂钩将被调用。

感谢您的建议。我同意这是一个很好的包裹。然而，我正在寻找一个比这更简单的解决方案，我认为我提出的解决方案更干净，更容易推理。你觉得呢？这要看情况了。如果你只是简单地寻找一个普通的，这是绝对可以与你所拥有的。

import React, { Component } from 'react';

const INITIAL = 'initial';

class Scrollable extends Component {
  componentWillUpdate(){
    if(this.props.autoScroll){
      // only auto scroll when the scroll is already at bottom.
      this.autoScroll = this.outterEl.scrollHeight - this.outterEl.scrollTop - Number.parseInt(this.props.height) < 1;
    }
  }

  componentDidUpdate(){
    if(this.autoScroll) this.outterEl.scrollTop = this.outterEl.scrollHeight;
  }

  render() {
    let styles = {
      overflowX: (this.props.x? 'auto': INITIAL),
      overflowY: (this.props.y? 'auto': INITIAL),
      maxWidth: this.props.width || INITIAL,
      maxHeight: this.props.height || INITIAL,
    };
    return (
      <div ref={el => this.outterEl = el} style={styles}>
        <div ref={el => this.innerEl = el}>
            {this.props.children}
        </div>
      </div>
    );
  }
};

export default Scrollable;

import { connect } from 'react-redux';

import Scrollable from '../components/Scrollable';

const mapStateToProps = (state, ownProps) => Object.assign({
  state: state[ownProps.autoScroll] || false
}, ownProps);

export default connect(mapStateToProps)(Scrollable)