reactjs - 在nextjs中具有通用的 header 布局

Question

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

我是next.js的新手，会使用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>
       )
}

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

index.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>

    )
}

layout.js

const Layout = ({children}) => (


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

  );

Answer 1

根据我对您的问题的看法，您想将HeaderComponent用作两个页面的通用 header 吗？然后，我建议将其放在您的components/Layout文件中。接下来，将所有页面包装在布局组件中，从而将标题添加到所有页面。

我也想知道为什么会有index.js文件？除非将其放置在pages/文件夹中，否则通常不会在Next中执行此操作。页面user.js和nonuser.js也应该放在pages/文件夹中。然后，Next将自动将加载到文件，并在/user和/nonuser路由下提供它们(基于文件名)。这还将使Next在上述布局组件中包装每个页面。

我建议调查NextJS learning guide。它为NextJS提供了很好的介绍，并且使您可以更轻松地使用NextJS。他们有一节解释how to use Shared Components的类(class)，它准确地解释了您似乎在寻找什么。

希望这个对你有帮助。

编辑:

使用_app.js的示例

以下是如何在接下来的_app.js中使用自定义布局组件的示例。它基于Nexts自己的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>
    )
  }
}

要获取有关如何正确使用 _app.js的更多信息，请查看其 documentation on custom app。