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

在标头内，将呈现不同的子组件，直到最终形成菜单为止，并根据从API接收到的数据菜单呈现一些Link组件和/或“ a”标签。

同时，PageContent通过API数据的子组件并基于此渲染其他子组件。

PageContent的组织方式类似于

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

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

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

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

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

基本上，CHILD LINK具有锚点'＃some-id'，而PAGESECTION具有已定义的[some-id]引用

启用

之类的适当模式（或任何模式！）是什么？

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

在链接组件内？

当前未使用助焊剂/氧化还原

Answer 1

赞：

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

您也可以查看this thread来滚动查看。有很好的解决方案。

反应：了解裁判并定位子裁判

1 个答案: