reactjs - 如何在 React 中渲染部件
问题描述
您好,我目前正在做 Spotify 克隆编码。如果您按侧边栏上的菜单,我希望呈现它旁边的白色背景。我该怎么做?
<SideBackground>
<LogoImg src="https://music-b26f.kxcdn.com/wp-content/uploads/2017/06/635963274692858859903160895_spotify-logo-horizontal-black.jpg"/>
<Link to="/">
<Option Icon={HomeIcon} title="Home"></Option>
</Link>
<Link to="/search">
<Option Icon={HomeIcon} title="Search"></Option>
</Link>
<Link to="/library">
<Option Icon={HomeIcon} title="Library"></Option>
</Link>
<StringTitle>PLAYLIST</StringTitle>
<Line />
{playList.map(({ name }) => (
<PrintList>{name}</PrintList>
))}
</SideBackground>
上面的代码是侧边栏代码。
<Router>
<Switch>
<Route exact path="/" component={Main}/>
<Route exact path="/search" component={Search}/>
<Route exact path="/library" component={Library} />
</Switch>
</Router>
上面的代码是app中连接路由器的代码。
目前的代码,整个页面的局部渲染是改的,不是这样的。
解决方案
您可以在 react-router-dom 中使用 sidenav 功能。
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
// Each logical "route" has two components, one for
// the sidebar and one for the main area. We want to
// render both of them in different places when the
// path matches the current URL.
// We are going to use this route config in 2
// spots: once for the sidebar and once in the main
// content section. All routes are in the same
// order they would appear in a <Switch>.
const routes = [
{
path: "/",
exact: true,
sidebar: () => <div>home!</div>,
main: () => <h2>Home</h2>
},
{
path: "/bubblegum",
sidebar: () => <div>bubblegum!</div>,
main: () => <h2>Bubblegum</h2>
},
{
path: "/shoelaces",
sidebar: () => <div>shoelaces!</div>,
main: () => <h2>Shoelaces</h2>
}
];
export default function SidebarExample() {
return (
<Router>
<div style={{ display: "flex" }}>
<div
style={{
padding: "10px",
width: "40%",
background: "#f0f0f0"
}}
>
<ul style={{ listStyleType: "none", padding: 0 }}>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/bubblegum">Bubblegum</Link>
</li>
<li>
<Link to="/shoelaces">Shoelaces</Link>
</li>
</ul>
<Switch>
{routes.map((route, index) => (
// You can render a <Route> in as many places
// as you want in your app. It will render along
// with any other <Route>s that also match the URL.
// So, a sidebar or breadcrumbs or anything else
// that requires you to render multiple things
// in multiple places at the same URL is nothing
// more than multiple <Route>s.
<Route
key={index}
path={route.path}
exact={route.exact}
children={<route.sidebar />}
/>
))}
</Switch>
</div>
<div style={{ flex: 1, padding: "10px" }}>
<Switch>
{routes.map((route, index) => (
// Render more <Route>s with the same paths as
// above, but different components this time.
<Route
key={index}
path={route.path}
exact={route.exact}
children={<route.main />}
/>
))}
</Switch>
</div>
</div>
</Router>
);
}
推荐阅读
- testing - 如何设置 TestCafe 以在 CLI 中指定的环境中运行?
- gcloud - gcloud dataproc 集群创建:没有名为 jsonschema 的模块
- python - 用于传输照片的python套接字编程
- matlab - 太多 for 循环迭代 - for 循环终止
- java - 如何在数组中获得最小值
- coq - 如何在 Coq Software Foundations 中查找关键字的解释?
- java - 如何将几个参数移动到杰克逊的另一个节点?
- vba - VBA - 从 ASP 页面检索数据
- ffmpeg - 使用复杂过滤器 amerge 的 FFmpeg 无法在 iOS 上播放
- javascript - 如何在状态之间为图像设置动画