Реагировать: понимание рефери и ориентация на рефери ребенка - PullRequest
Новая
       7

Реагировать: понимание рефери и ориентация на рефери ребенка

0 голосов
/ 09 сентября 2018

У меня есть приложение реакции, организованное так: 

class AppLayout extends Component { 

  componentDidMount () {
    this.data = this.getEndpoint('some endpoint')
  }
  ...

  render () { 

    return (
    <Header data={this.data} />
    <PageContent data={this.data} />
    <Footer data={this.data} />
     )
    }
}

внутри заголовка различные дочерние компоненты отображаются до тех пор, пока в конечном итоге меню и некоторые компоненты Link и / или теги «a» не будут отображены на основе меню данных, полученных из API.

между тем, PageContent проходит через подкомпонент данных API и визуализирует некоторые другие дочерние компоненты, основанные на этом.

PageContent организован как 

<PageSection >
   <Child>
   <Child>
</PageSection>

<PageSection>
   <Child>
   <Child>
</PageSection>

в меню есть те же ссылки привязки страницы, которые ссылаются на эти «динамически» созданные PageSections, ссылки на каждый раздел страницы объявляются в каждом компоненте PageSection

Я изо всех сил пытаюсь найти способ как-то ссылаться на эти ссылки в меню дочерних компонентов Link. то есть сделайте прокрутку ссылки «#» в правильное положение 

        PARENT
          |
    ------------------
    |                 | 
PAGECONTENT        MENUS
    |                 |
PAGESECTION       CHILD LINK

в основном, CHILD LINK имеет привязку '# some-id', а PAGESECTION имеет определенный ref [some-id]

Каков правильный шаблон (или любой шаблон!) Для включения чего-то вроде 

const node = ReactDOM.findDOMNode([hash anchor])
if (node) {
  node.scrollIntoView({behavior: 'smooth', block: 'center'})

внутри компонента Link?

в настоящее время не использует flux / redux

1 Ответ

0 голосов
/ 09 сентября 2018

Как это: 

<Link to="/header#child">Go</Link>

Вы также можете посмотреть этой ветки , чтобы работать с прокруткой в ​​поле зрения. Есть хорошие решения.

...