scrollIntoView bằng React refs

Question

Chúng tôi đang cố gắng cuộn đến một thành phần cụ thể khi người dùng đóng thành phần khác.

ví dụ của chúng tôi là rất giống với xuống dưới, lấy từ 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} 
     /> 
    ); 
    } 
} 

Chúng tôi đang vẽ một danh sách lớn của thẻ và muốn để có thể di chuyển đến một thẻ cụ thể bằng cách gọi this.refs[elem].scrollIntoView()

Nhưng vấn đề của chúng tôi là gọi this.refs trả về một đối tượng trống ở tất cả các cấp và vì vậy chúng tôi không thể đính kèm vào một phần tử cụ thể và sau đó kích hoạt nó khi người dùng quay lại để xem thành phần này.

Bạn muốn được trợ giúp về cách giải quyết vấn đề này.

Answer 1

Bạn đang cố gắng gọi số this.refs[elem].scrollIntoView() ở đâu? Bạn nên làm việc với ref s bên trong componentDidMount hoặc componentDidUpdate, không phải bên trong phương thức render.

Answer 2

Tôi đã giải quyết vấn đề cụ thể của mình bằng cách cung cấp câu lệnh if được viết bên dưới trong thành phần Grandparent của tôi.

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