React:了解refs和目标子refs

Question

我有一个react应用程序是这样组织的：

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} />
     )
    }
}

在header内部，不同的子组件被呈现，直到最终菜单和一些链接组件和/或'a‘标签基于从API接收的数据的菜单被呈现。

同时，PageContent遍历API data的一个子组件，并在此基础上呈现其他一些子组件。

PageContent的组织方式如下

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

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

菜单有一些相同页面锚点链接，这些链接引用这些“动态”创建的PageSections，在每个PageSection组件中声明对每个页面部分的引用

我正在努力寻找一种方法，能够以某种方式在菜单子链接组件中引用这些引用，即使一个'#‘链接滚动到正确的位置

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

基本上，子链接有一个锚点'# some-id '，而PAGESECTION有一个定义的引用some-id

什么是正确的模式(或任何模式！)用于实现类似于

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

在一个链接组件中？

当前未使用flux/redux

Answer 1

如下所示：

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

您还可以查看this thread以使用scroll into视图。有很好的解决方案。