反応すると、子供が変わるときに気づく方法を教えてください。

Question

子要素の幅/高さが特定の値を超えた場合にスクロールを有効にする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> 

これは素晴らしいです。これ以外は、スクロール可能な部分を常に下にスクロールさせるもう1つの機能を追加したいと思います。

this.outterEl.scrollTop = this.innerEl.offsetHeight; 

しかしthis.props.children高さが変化したときに呼び出される、この唯一の必要性：私はそれを行う方法のいくつかのアイデアを持っています。どのようにこれを達成するためのアイデアはありますか？

ありがとうございます。

Answer 1

今、私はこれを解決する考えがあります。

私は反応還元剤を使用しているので、問題は、this.props.childrenがコンテンツの更新時に必ずしも変更されない可能性があるため、このScrollableコンポーネントでライフサイクルフックを使用できないことです。

これを達成する1つの方法は、Scrollに対応する値をredux stateに認識させることです。その関連値が更新されると、下にスクロールすることができます。

スクロール成分：

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) 

、Scrollableのライフサイクルフック場合、対応する状態変化と呼ぶことにします。

Answer 2

私はパッケージelement-resize-detectorをお勧めします。それはリアクション固有のものではありませんが、その周りに高次のコンポーネントを簡単に構築したり、スクロール可能なコンポーネントをそのコンポーネントに統合することは簡単です。