レンダリングされた要素の高さを画面に表示する前に取得する（ReactJS）

Question

小道具（trueまたはfalse）に応じて上下にスライドするアニメーションコンポーネントがあります。私はmaxHeight：0を使用してコンポーネントを非表示にしています（遷移はCSSで行われています）。これはpropとして渡されるデフォルトの状態です。開かれたスタイルの場合、コンテンツが適切に収まるように、ちょうど必要以上に大きいmaxHeightを使用します。開かれた後、私はrefでその高さを取得し、それに応じてmaxHeightを設定することができます。それは開閉だ最初の時間が原因それは（多分開いた1オフスクリーンレンダリングし、必要以上のmaxHeightが大きいに滑らかではない

1. ：このアプローチの2つの問題がある

   export default class AnimatedInput extends React.Component { 
       constructor (props) { 
       super(props); 
       this.state = { 
        height: 600 
       } 
       } 
       componentDidUpdate(prevProps) { 
       var height = this.refs.inputNode ? this.refs.inputNode.clientHeight : height; 
       console.log(height); 
       if (this.props.open === false && prevProps.open === true) { 
        this.setState({height: height}); 
       } 
       } 
       render() { 
       var {height} = this.state; 
       let test = this.props.open ? 'boxVisible' : 'boxHidden'; 
       var styles = { 
        boxHidden: { 
        ... 
        maxHeight: 0, 
        }, 
        boxVisible: { 
        .... 
        maxHeight: height, 
        } 
       } 
   
       return (
        <div style={styles[test]} ref="inputNode"> 
        {this.props.children} 
        </div> 
       ) 
       } 
   } 
   

2. 完全に開く前に閉じていると、それよりも低くなります（簡単な修正だと思いますが、高さの値を更新する必要はありません）。

私は適切なトラックにいますか？どのようにこれらを修正しますか？私はCSSに固執するか、おそらくJSで完全に移行するべきですか？あなたの提案をありがとう！

Answer 1

あなたはReactCSSTransitionGroupを探しています。私はあなたと全く同じことにこれを使いました。