scrollIntoView kullanarak React refs

Question

Kullanıcı başka bir bileşeni kapattığında belirli bir bileşene ilerlemeye çalışıyoruz.

Bizim örnek this.refs[elem].scrollIntoView()

arayarak aşağı aşağıda, 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} 
     /> 
    ); 
    } 
} 

Biz kartların büyük oluşturma listesinin ve belirli bir karta ilerleyin edebilmek istiyorsanız alınan bu çok benzer Ancak bizim sorunumuz, this.refs numaralı telefonun aranmasının her seviyede boş bir nesne döndürdüğü ve bu nedenle belirli bir öğeye ekleyemediğimiz ve kullanıcı bu bileşeni görüntülemek için geri geldiğinde onu tetiklediğidir.

Bu sorunu çözme konusunda nasıl yardımcı olabileceğimiz konusunda yardım ister misiniz?

Answer 1

this.refs[elem].scrollIntoView() numaralı telefonu aramaya çalışıyorsunuz? render yönteminin içinde değil, componentDidMount veya componentDidUpdate içinde ref s ile çalışmalısınız.

Answer 2

Büyükbaba bileşenimde aşağıda yazılı bir if ifadesi sağlayarak özel sorunumu çözdüm.

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