web-dev-qa-db-fra.com

scrollIntoView en utilisant les références de React

Nous essayons de faire défiler vers un composant spécifique lorsque l'utilisateur ferme un autre composant. 

Notre exemple est très similaire à celui ci-dessous, tiré de 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}
      />
    );
  }
}

Nous rendons une grande liste de cartes et voulons pouvoir faire défiler une carte en appelant this.refs[elem].scrollIntoView()

Mais notre problème est que l'appel de this.refs renvoie un objet vide à tous les niveaux et nous ne pouvons donc pas nous attacher à un élément spécifique, puis le déclencher lorsque l'utilisateur revient à visualiser ce composant. 

Voudrait de l’aide sur la façon de résoudre ce problème. 

javascriptreactjsdomrefreact-dom
9
Sohil Pandya

Où essayez-vous d'appeler this.refs[elem].scrollIntoView()? Vous devriez travailler avec refs dans componentDidMount ou componentDidUpdate, pas dans la méthode render.

1
claireinez

J'ai résolu mon problème spécifique en fournissant une déclaration if écrite ci-dessous dans la composante Grands-parents.

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