it-swarm.com.ru

scrollIntoView с использованием React refs

Мы пытаемся перейти к определенному компоненту, когда пользователь закрывает другой компонент.

Наш пример очень похож на приведенный ниже, взятый из 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[elem].scrollIntoView()

Но наша проблема в том, что вызов this.refs возвращает пустой объект на всех уровнях, поэтому мы не можем присоединиться к определенному элементу, а затем запустить его, когда пользователь вернется, чтобы просмотреть этот компонент.

Хотелось бы помочь, как можно решить эту проблему?.

9
Sohil Pandya

Где вы пытаетесь позвонить this.refs[elem].scrollIntoView()? Вы должны работать с refs внутри componentDidMount или componentDidUpdate, а не внутри метода render.

1
claireinez

Я решил свою конкретную проблему, предоставив оператор if, написанный ниже, в моем компоненте Grandparent.

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