浏览多层React应用

编程问答 2022-08-12

问题描述

我目前正在构建一个具有多层组件结构的React应用，用户可以在其中导航到更深的层次。用户将从父级的最高级别开始，然后向下导航至应用程序的越来越深的层（也可以返回到上一个层次）。这些层遵循线性结构（例如1,2,3,4），因此用户始终遵循预定义的路线，并且用户可以使用“下一个”和“上一个”按钮来回导航。结构如下：

父级->子级1->子级2->子级3

因此，每个后续层都位于前一层之下。该应用程序本身将呈现的内容在每个后续层中都变得更加详细和细化。

我的问题是如何最好地通过组件表示此结构。一种选择是通过“图层”状态跟踪当前图层，然后显示与当前图层状态相对应的组件（如下面的示例代码所示）。

我不确定这是否是我应用程序结构的最佳解决方案。我将非常感谢您提出任何建议。

谢谢。

import React,{ useState } from 'react';

const App = () => {
const [layer,setLayer] = useState(1);

const nextLayer = () => {
    setLayer(layer + 1);
}

const prevLayer = () => {
    if (layer === 1) {
            return;
        }
    setLayer(layer - 1);
}

let currentLayerView;
    switch (layer) {
        case 1:
            currentLayerView= (
                <Layer1 
                    nextLayer={nextLayer}
                    prevLayer={prevLayer} 
                />
            );
            break;
        case 2:
            currentLayerView= (
                <Layer2 
                    nextLayer={nextLayer}
                    prevLayer={prevLayer} 
                />
            );
            break;
        case 3:
            currentLayerView= (
                <Layer3 
                    nextLayer={nextLayer}
                    prevLayer={prevLayer} 
                />
            );
            break;
         default:
            console.log('default');
    }

return (
        <>
            {currentLayerView}
        </>
    );
};

export default App;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

architecturearchitecturearchitecturecomponentscomponentslayerlayerlayermultipagereactjsreactjsreactjsreactjs