React refsを使用したscrollIntoView

Question

ユーザーが別のコンポーネントを閉じるときに、特定のコンポーネントにスクロールしようとしています。

私たちの例では、我々は、カードの大きなリストをレンダリングし、this.refs[elem].scrollIntoView()

を呼び出すことにより、特定のカードにスクロールできるようにしたいされているhttps://reactjs.org/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components

function CustomComponents(props) { 
    const items = [1,2,3,4].map((x, i) => return (
    <div ref={props.inputRef} key={i}> 
    x + hello 
    </div> 
) 

    return (
    <div> 
     { items } 
    </div> 
); 
} 

function Parent(props) { 
    return (
    <div> 
     <CustomComponents inputRef={props.inputRef} /> 
    </div> 
); 
} 


class Grandparent extends React.Component { 
    render() { 
    return (
     <Parent 
     inputRef={el => this.inputElement = el} 
     /> 
    ); 
    } 
} 

から取られ、以下のダウンと非常に似ていますしかし問題は、this.refsを呼び出すと、すべてのレベルで空のオブジェクトが返されるため、特定の要素にアタッチしてから、ユーザーがこのコンポーネントを表示するために戻ったときに呼び出すことができないということです。

この問題をどのように解決するかについてのヘルプが必要です。

Answer 1

ここでthis.refs[elem].scrollIntoView()に電話をかけようとしていますか？ refのcomponentDidMountまたはcomponentDidUpdateの内部で作業する必要があります。renderメソッドの内部ではありません。

Answer 2

下記のif文を私のGrandparentコンポーネントに提供することで、私の特定の問題を解決しました。

inputRef={el => { 
    if (el && el.id == this.state.selectedBuildingRef) { 
    this.myelement.scrollIntoView(); 
    window.scrollBy(0, -65); 
    } 
}}