在 nextjs 中有一个通用的标题布局

IT技术 reactjs next.js
2021-05-13 07:53:05

我有2页user.js，并nonuser.js与一个成分标题。user.js并nonuser.js具有相同的功能，但 UI 略有变化。现在我想整合所有这些。就像我访问页面时默认user.js必须查看的表一样。单击nonuser.js它应该更改为nonuser.js表格。而且我希望两者的标题相同，当我在页面之间切换时，文本框中的内容不应更改。

我是 next.js 的新手并做出react

头文件.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

用户.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>
       )
}

我没有添加非用户组件，它与用户组件相同

索引.js

import Header from '../components/Header/header';
import Layout from '../components/Layout';
function App() {
 return (
     <Header/>
         <div>

         </div>

 )
}
export default App;

我已经这样做了，第一次登陆时只有标题，点击标题中的用户链接，标题消失，只显示用户表。

编辑：我试过这个标题出现在两个页面中，当我在页面之间切换时，我在标题中放置了一个文本框 .textbox 值清除。

user.js 和 nonuser.js

 render(){
   return(
            <Layout>
                <div>.....</div>
            </Layout>
    )
 }

也试过 index.js

   render() {
    return (
        <Layout>
            <div>

            </div>
        </Layout>

    )
}

布局.js

const Layout = ({children}) => (


   <div>
     <Header></Header>
     {children}
   </div>

  );
1个回答

根据我对您的问题的理解，您想HeaderComponent用作两个页面的通用标题吗？那我建议把它放在你的components/Layout文件里。接下来将在布局组件中包装所有页面，从而将您的页眉添加到所有页面。

我也想知道为什么你有一个index.js文件？除非它放在pages/文件夹中，否则它不是您通常在 Next 中执行的操作。页user.js和nonuser.js也应该放在pages/文件夹中。接下来将自动加载 to 文件并在路由/user和/nonuser（基于文件名）下提供它们。这也将使 Next 将每个页面包装在上面提到的布局组件中。

我建议查看NextJS learning guide。它提供了对 NextJS 的非常好的介绍，如果您愿意，它将使使用 NextJS 变得更加容易。他们有一堂课解释了如何使用共享组件，它准确地解释了您似乎正在寻找的内容。

希望这个对你有帮助。

编辑：

使用示例 _app.js

以下是如何在 next using 中使用自定义布局组件的示例_app.js。它基于 Nexts 自己的示例。

// 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>
    )
  }
}

要获得有关如何_app.js正确使用的更多信息，请查看他们关于自定义应用程序的文档。

其它你可能感兴趣的问题
上一篇Cura 是否有任何填充百分比的算法，还是只有特定的模式？ 下一篇Creality Ender-3 的运行电压是多少？