Question

试图弄清楚如何将道具传递到通过Switch-> Route组件向上一级控制的子组件中。这似乎是一个非常简单的用例，我已经尝试了很多设置，但似乎无法解决。

我尝试了Passing props to Children React Router此处接受的答案中列出的两种方法。这不仅不起作用，而且我也不认为这适用于我的用例。

该代码当前支持接受子代的布局组件。

DashboardLayout.js

const DashboardLayout = (props) => {
    const [isMobileActive, setMobileActive] = useState(true);
    const [activeMenu, setActiveMenu] = useState(null);
    const [menuState, setMenuState] = useState("closed");

    const childrenWithProps = React.cloneElement(props.children.props, {...props, isPushed: menuState === "open"});
    return (
        <>
            <SideMenuBar {...props}
                isDark={props.isDark}
                menuTrigger={(menu) => {
                    setActiveMenu(menu);
                    menuState === "closed" && setMenuState("open");
                }}
            />

            {
                activeMenu !== null
                  && <ChildMenu {...props}
                      activeMenu={activeMenu}
                      menuState={{state: menuState, update: setMenuState}} />
            }

            <NavBar {...props}
                isPushed={menuState === "open"}
                toggleMobile={setMobileActive}
                isMobileActive={isMobileActive} />

            <MobileNav isActive={isMobileActive} />


            // here is where I would like to pass local some local state 
            // as props to children.
            { props.children } 

            <SidePanel />

        </>
    );
};

上方的一层是DashboardView，它是一个使用布局的容器，该布局根据使用React-Router的路由而变化。

DashboardView.js

import React, {useState} from "react";
import { Switch, Route } from "react-router-dom";

import {DashboardLayout} from "../../layouts";
import {
    DashWrapper,
    DocsWrapper,
} from "./wrappers";

const DashboardView = (props) => {

    return (
        <DashboardLayout {...props} isDark={true} store={store}>
            <Switch>
                <Route
                    path={`${props.match.url}/documents`}
                    component={DocsWrapper} />
                <Route
                    path={`${props.match.url}/`}
                    component={DashWrapper} />
            </Switch>
        </DashboardLayout>
    );
};

在children块中，我试图克隆child（路由）的child（Switch），以将props添加到renderProps上，但没有得到我期望的结果。

我之所以这样设置是因为随着时间的流逝，将需要添加各种内容包装来实现功能。我不想总是将路由添加到布局组件中，以便布局视图可重用。我知道最简单的解决方案是创建内部DashboardLayout并使用组件的渲染道具，但我想避免这种情况。我可以将布局视图内部的状态放入控制视图组件的子视图中。

将道具传递给React.Switch路线组件

0 个答案: