时间戳

首页 > 解决方案 > 使用布局渲染组件

reactjs - 使用布局渲染组件

问题描述

我有一个布局，我在其中获取用户数据，然后是几页。在子组件的布局中使用用户数据的正确方法是什么？

这是我的主要组件

const Main = () => {
    return (
        <Router>
            <Route path="/" exact strict component={Homepage} />
            <Layout>
                <Route path="/friends" exact strict component={Friends} />
                <Route path="/family" exact strict component={Family} />
            </Layout>
        </Router>
    )
 }

这是布局

const Layout (props) => {
    const [user, setUser] = useState({})
    useEffect(() => {
        getUser()
            .then(setUser)
            .catch(console.log('redirect to login page'))
    }, [])

    return(
        <div>
        <header>welcome {user.name}</header>
        <div>{props.children}</div>
        <footer>
            <NavLink to="/family">Family</Navlink>
            <NavLink to="/friends">Friends</Navlink>
        </footer>
    )
}

const Family = () => {return (<p>family</p>)}
const Friends = () => {return (<p>friends</p>)}

我不确定如何更改主组件以将这 2 个 url 路由到组件，但使用布局。

即使我在主页中，这也会渲染布局我在布局中包装朋友和家人，但它应该是相反的吗？如果我不在应该使用它的页面之一中，如何避免呈现布局？

标签： reactjs

解决方案

使用render prop，从 child(Layout) 传入用户值并调用 Main 组件中的子项。

Switch当您在 HomePage 上时，还可以使用一个组件来避免呈现 Layout 组件

主要部件

const Main = () => {
    return (
        <>
            <Switch>
                <Route path="/" exact strict component={Homepage} />
                <Layout>
                    {(user) => <>
                    <Route path="/friends" exact strict render={(props) => <Friends {...props} user={user} />} />
                    <Route path="/family" exact strict render={(props) => <Family {...props} user={user} />} />
                 </>}
                </Layout>
            </Switch>
        </>
    )
}

布局组件

const Layout = (props) => {
    const [user, setUser] = useState({})
    useEffect(() => {
        getUser()
            .then(setUser)
            .catch(console.log('redirect to login page'))
    }, []);

    return(
        <div>
            <header>welcome {user.name}</header>
            <div>{props.children(user)}</div>
            <footer>
                <NavLink to="/family">Family</Navlink>
                <NavLink to="/friends">Friends</Navlink>
            </footer>
        </div>)
}

推荐阅读