Question

我是React JS的新手，想了解有关实现侧面导航的一些想法。

我们目前具有Side Nav，它是通过以下结构的API响应生成的。一个节可能有也可能没有子节。同样，小节可能有也可能没有小节。这可以是无限的。

abc-SECTION
      abcdef-SUB-SECTION
           woirlew-SUB-SUB-SECTION
   ABCDWER-SUB-SECTION
   ABCDXDC
        WERLLWWR-SUB-SUB-SECTION
xyz-SECTION
   XYZSERF-SUB-SECTION
   XYZlJIO-SUB-SECTION
owe-SECTION
      abcdef-SUB-SECTION
      ABCDWER-SUB-SECTION
                slfjl-SUB-SECTION

我们希望树结构保持上面的样子，但我们希望树结构的行为类似于下面的链接。

https://www.hindustantimes.com/interactives/aap-government-two-years-report-card/

我们已经使用递归功能实现了侧边栏渲染。我正在寻找滚动行为。

任何指导将不胜感激。什么是开始的好方法？

Answer 1

要创建侧边栏，可以在reactjs中创建一种递归组件。

B1

Answer 2

在React中呈现列表，您可以有一个单独的函数，该函数将数据结构作为输入（例如数组或对象），然后递归调用自身以生成UL，LI结构。请检查此link，以进行嵌套对象数组的递归迭代

对于滚动行为，您可以使用javascript onClick事件处理程序和window.scrollTop来计算并平滑滚动到该位置，或者使用轻量级的库来Click here to Check it out

反应侧栏-类似于提供的链接进行导航

2 个答案: