在 nextjs 中有一个通用的标题布局
[英] Have a common header layout in nextjs
本文介绍了在 nextjs 中有一个通用的标题布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有 2 页 user.js 和 nonuser.js 和一个组件标题.user.js 和 nonuser.js 具有相同的功能，但 UI 略有变化.现在我想整合所有这些.就像我在默认情况下访问页面时必须查看 user.js 表一样.一键nonuser.js，它应该会变成nonuser.js 表.而且我希望两者的标题相同，当我在页面之间切换时，文本框中的内容不应改变.
我是 next.js 的新手并做出反应
header.js
import React, { Component } from 'react';导入'../Header/header.css';从'antd'导入{菜单，输入，图标}；从下一个/链接"导入链接；类 HeaderComponent 扩展组件 {使成为() {返回 (<div className="导航栏"><div className="header"><div className="col-1"><div className="菜单"><div><Link href="/User"><a>Users</a></Link>
<div><Link href="/nonUser"><a>非用户</a></Link>
<Input className="text-box" placeholder="Enter name" prefix={<Icon type="search" ></Icon>}></Input>
)}}导出默认 HeaderComponent
user.js
class 用户扩展组件 {使成为() {返回 (<React.Fragment><div className="ant-table-row"><div className="table-head-text"><span className="text">Users({data.length})</span><Pagination defaultCurrent={1} total={100}/><表rowKey={data._id}列={this.columns1}rowSelection={this.rowSelection}onExpand={this.onExpand}数据源={数据}/>
</React.Fragment>)}
我没有添加非用户组件，它和用户组件一样
index.js
import Header from '../components/Header/header';从../components/Layout"导入布局；功能应用(){返回 (<标题/><div>)}导出默认应用程序；
我已经这样做了，在第一次登陆时，唯一的标题在那里，点击标题中的用户链接，标题消失，只显示用户表.
我试过这个标题出现在两者中，我在标题中放置了一个文本框.当我在页面之间切换时，文本框值会清除.
user.js 和 nonuser.js
render(){返回(<布局><div>.....</div></布局>)}
也试过了index.js
render() {返回 (<布局><div></布局>)}
layout.js
const Layout = ({children}) =>(<div><标题></标题>{孩子们});
解决方案
根据我对您的问题的理解，您想使用 HeaderComponent 作为两个页面的公共标题吗?然后我建议将它放在您的 components/Layout 文件中.接下来将在布局组件中包装所有页面，从而将您的页眉添加到所有页面.
我也想知道为什么你有一个 index.js 文件?除非它放在 pages/ 文件夹中，否则它不是你通常在 Next 中做的事情.页面 user.js 和 nonuser.js 也应该放在 pages/ 文件夹中.接下来将自动加载 to 文件并在路径 /user 和 /nonuser (基于文件名)下提供它们.这也会让 Next 将上面提到的布局组件中的每个页面都包裹起来.
我建议查看 NextJS 学习指南.它提供了对 NextJS 的非常好的介绍，如果您愿意，它将使使用 NextJS 变得更加容易.他们有一堂课解释了如何使用共享组件，它准确地解释了您的想法正在寻找.
希望这会有所帮助.
使用 _app.js
的示例以下是如何使用 _app.js 使用自定义布局组件的示例.它基于 Nexts 自己的 example.>
//components/Layout.jsimport React, { Component } from 'react';从'./Header'导入标题；类布局扩展组件{使成为 () {const { children } = this.props返回 (<div className='layout'><标题/>{孩子们});}}
//pages/_app.js从反应"导入反应；从下一个/应用程序"导入应用程序；从../components/Layout"导入布局；导出默认类 MyApp 扩展 App {使成为 () {const { Component, pageProps } = this.props返回 (<布局><组件{...pageProps}/></布局>)}}
要获得有关如何正确使用 _app.js 的更多信息，请查看他们的 自定义应用程序文档.
I have 2 pages user.js and nonuser.js and one component header. user.js and nonuser.js have same functionality with slight changes in UI. Now I want to integrate all this. Like when I visit the page by default table of user.js must be viewed. One click of nonuser.js it should change to the nonuser.js table. And I want header to be same for both, content in textbox should not change when I switch between pages.
I'm new to next.js and react
header.js
import React, { Component } from 'react';
import '../Header/header.css';
import { Menu, Input, Icon } from 'antd';
import Link from 'next/link';
class HeaderComponent extends Component {
render() {
return (
<div className="navbar">
<div className="header">
<div className="col-1">
<div className="menu">
<div>
<Link href="/User"><a>Users</a></Link>
</div>
<div>
<Link href="/nonUser"><a>Non Users</a></Link>
</div>
<Input className="text-box" placeholder="Enter name" prefix={<Icon type="search" ></Icon>}></Input>
</div>
</div>
</div>
</div>
)
}
}
export default HeaderComponent
user.js
class User extends Component {
render() {
return (
<React.Fragment>
<div className="ant-table-row">
<div className="table-head-text">
<span className="text">Users({data.length})</span>
<Pagination defaultCurrent={1} total={100} />
</div>
<Table
rowKey={data._id}
columns={this.columns1}
rowSelection={this.rowSelection}
onExpand={this.onExpand}
dataSource={data} />
</div>
</React.Fragment>
)
}
I didn't add nonuser component, its same as user component
index.js
import Header from '../components/Header/header';
import Layout from '../components/Layout';
function App() {
return (
<Header/>
<div>
</div>
)
}
export default App;
I've done this, On first landing the only header is there and on clicking user link in header, header disappears and only table of user is shown.
EDIT:
I tried this header appears in both and I placed a textbox in header .textbox value clears when I switch between pages.
user.js and nonuser.js
render(){
return(
<Layout>
<div>.....</div>
</Layout>
)
}
Also tried
index.js
render() {
return (
<Layout>
<div>
</div>
</Layout>
)
}
layout.js
const Layout = ({children}) => (
<div>
<Header></Header>
{children}
</div>
);
解决方案
From what I make of your question, you want to use HeaderComponent as a common header for both pages? Then I'd suggest placing it in your components/Layout file. Next will wrap all pages in the layout component, thus adding your header to all pages.
I'm also wondering why you have an index.js file? Unless it's placed in pages/ folder, it isn't something you normally do in Next. The pages user.js and nonuser.js should also be placed in the pages/ folder. Next will then automatically load the to files and provide them under the routes /user and /nonuser (based on the name of the file). This will also make Next wrap each page in the layout component mentioned above.
I'd suggest looking into NextJS learning guide. It provides a very good introduction to NextJS and will make it a lot easier to use NextJS if you. They have a lesson explaining how to use Shared Components which explains exactly what you seem to be looking for.
Hope this helps a bit.
Edit:
Example using _app.js
The following is an example of how to use a custom layout component in next using _app.js. It's based on Nexts own example.
// components/Layout.js
import React, { Component } from 'react';
import Header from './Header';
class Layout extends Component {
render () {
const { children } = this.props
return (
<div className='layout'>
<Header />
{children}
</div>
);
}
}
// pages/_app.js
import React from 'react';
import App from 'next/app';
import Layout from '../components/Layout';
export default class MyApp extends App {
render () {
const { Component, pageProps } = this.props
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
}
To get more information on how to make use of _app.js properly, check out their documentation on custom app.
这篇关于在 nextjs 中有一个通用的标题布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
