2017-10-11 15 views
0

私は最初のreact + reduxアプリを作っています。質問があります。私は入力フィールドをレンダリングするコンポーネントを持っています。その上にいくつかのコンテンツが追加されるので、scrollIntoVIewに必要です。コンポーネントでscrollIntoViewを強制的に更新する必要がありますか?

だから、私はちょうどコンポーネントcomponentDidUpdate()のライフサイクルメソッドでのscrollIntoViewを追加しました:

componentDidUpdate() { 
    console.log("scroll"); 
    this.refs.input.scrollIntoView(); 
} 

唯一の問題は、このコンポーネントが再(その中には何も変化として)たびにレンダリングされませんということですので、のscrollIntoView 1回だけ呼び出されます。

私はコンポーネントを強制的に更新することができますが、これは実際には良い練習ではありませんか?この場合、私は何ができますか?

+0

たとえば、「this.refs.offsetTop」で強制的にリフローしてみてください。 https://gist.github.com/paulirish/5d52fb081b3570c81e3a –

+0

@ Theo.Tもう少し詳細をあなたの解決策を説明することができます、私は一種の迷子です –

+0

ああ、あなたの問題を誤解して申し訳ありません。しかし、scrollInToViewをトリガーすることは何ですか?プロパティの変更、ユーザーイベントですか? –

答えて

0

コンテンツを追加するたびにsetStateを呼び出してコンポーネントの状態のオブジェクトを更新すると、componentDidUpdateが呼び出されます。

2番目のパラメータがSETSTATEが一度 が実行されるオプションのコールバック関数は次のとおりです。setStateの第2引数については、次の
はまたsetStateに2つ目の引数(コールバック)を使用することができますが、リアクトドキュメントは言いますコンポーネントが再レンダリングされます。 一般に、そのようなロジックの代わりにcomponentDidUpdate()を使用することをお勧めします。

+0

もちろん、これを行うにはもっときれいな方法を探しています –

+1

この場合、 'componentDidUpdate'を使用する代わりに' setState'コールバック(第2引数)を使用してメソッドを呼び出すほうが良いでしょう。 –

+0

しかし、それはお勧めしません。私の更新された回答を参照してくださいhttps://github.com/facebook/react/issues/6320 – Dane

関連する問題