Вопрос:

Прокрутите страницу до дочернего компонента React одним нажатием кнопки

reactjs react-native

14 просмотра

1 ответ

296 Репутация автора

У меня есть родительский компонент заголовка, который отображает дочерний компонент ниже заголовка, с кнопкой в ​​заголовке, которую я хочу прокрутить до раздела дочернего компонента при нажатии.

Прямо сейчас я пытаюсь изменить состояние при нажатии кнопки и передать это новое состояние в качестве реквизита от родительского к дочернему компоненту. Затем в дочернем компоненте я пытаюсь запустить функцию scroll (), используя пропущенную опору в качестве идентификатора раздела, к которому я хочу перейти.

Родительский компонент:

 handleSelected = event => {
  this.setState({ selected: event.currentTarget.value });
 };

 <Button value="sectionOne" onClick={this.handleSelected} />

 <Child loadSelected={() => this.state.selected}</Child>

Дочерний компонент:

  ComponentDidMount() {
   let selected = this.props.loadSelected();
   this.handleNavigate(selected);
  }

  handleNavigate = section => {
    let el = document.getElementById(section);
    window.scrollTo({
      behavior: "smooth",
      left: 0,
      top: el.offsetTop
    });
  };
  ....
  ....
  ....
  <div id="sectionOne" />
Автор: Colin Sygiel Источник Размещён: 11.08.2019 08:36

Ответы (1)


1 плюс

18000 Репутация автора

При непосредственном взаимодействии с элементами в DOM вы, как правило, будете делать это с помощью ссылок, а не с помощью элементов, запрашиваемых из DOM с помощью таких методов, как getElementById(), querySelectorAll()и т. Д.

Есть несколько способов, которые вы можете интегрировать refsв свое приложение для достижения того, что вам требуется - один из подходов заключается в создании refкаждого раздела, сохранении каждого раздела с соответствующим ref в родительском (Header?) Компоненте, а затем handleNavigate()из родительского, а не от ребенка, как показано здесь:

class Parent extends React.Component {

  constructor(props) {
    super(props)

    this.sections = [
    {
        name : "Foo",
      ref : React.createRef()
    },
    {
        name : "Bar",
      ref : React.createRef()
    },
    {
        name : "Cat",
      ref : React.createRef()
    }]
  }

  handleNavigate = section => {

    let el = section.ref.current;
    window.scrollTo({
      behavior: "smooth",
      left: 0,
      top: el.offsetTop
    });
  };

  render() {
    return (
        <div>
      <nav>
      { this.sections.map(section => <button onClick={() => this.handleNavigate(section)}>{section.name}</button>)}
      </nav>
      <div>
      { this.sections.map(section => <Child section={section} />)}
      </div>
      </div>
    )
  }
}

class Child extends React.Component {
    render() {

    return <div ref={ this.props.section.ref } style={{padding:"15rem 0"}}>Section for { this.props.section.name }</div>
  }
}

Рабочий пример такого подхода см. В этой скрипке . Надеюсь, это поможет!

Автор: Dacre Denny Размещён: 11.08.2019 08:57
Вопросы из категории :
32x32