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 문을 제공하여 특정 문제를 해결했습니다.

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