React - 固定导航栏和导航标签

Question

我正在为我的项目使用 reactstrap 包。因此，我创建了一个 HeaderComponent，它是一个固定在顶部 fixed=top 的 Navbar。

import React from 'react';
import Context from '../provider'
import {
    Collapse,
    Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink,
    Form, FormGroup, Label, Input, Button,
} from 'reactstrap';
import LoginComponent from './LoginComponent'
import SignupComponent from './SignupComponent'

class HeaderComponent extends React.Component {
    render() {
        return (
            <Context.Consumer>
                {context => {
                    return (
                        <Navbar color="light" light expand="md" fixed="top">
                            <NavbarBrand href="/">Reddit</NavbarBrand>
                                <NavbarToggler onClick={() => context.toggleNavbar()} />
                                <Collapse isOpen={context.navbarOpen} navbar>
                                <Nav className="ml-auto" navbar>
                                    <NavItem><LoginComponent /></NavItem>
                                    <NavItem><SignupComponent /></NavItem>
                                </Nav>
                            </Collapse>
                        </Navbar>
                    )   
                }}
            </Context.Consumer>
        )
    }
}

export default HeaderComponent;

我也有一个TabComponent:

import React, {Component} from 'react'
import Context from '../../provider'
import {Nav, NavItem, NavLink} from 'reactstrap'
import classnames from 'classnames'

class TabComponent extends Component {
    render() {
        return (
            <Context.Consumer>
                {context => (
                    <Nav tabs>
                        <NavItem>
                            <NavLink
                                className={classnames({ active: context.activeTab === '1' })}
                                onClick={() => { context.toggleTab('1'); }}
                            >
                            Home
                            </NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink
                                className={classnames({ active: context.activeTab === '2' })}
                                onClick={() => { context.toggleTab('2'); }}
                            >
                            Popular
                            </NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink
                                className={classnames({ active: context.activeTab === '3' })}
                                onClick={() => { context.toggleTab('3'); }}
                            >
                            All
                            </NavLink>
                        </NavItem>                
                    </Nav>
                )}
            </Context.Consumer>
        )
    }
}

export default TabComponent;

我正在制作 HeaderComponent fixed 但我不知道如何制作 TabComponent fixed 在 HeaderComponent 下面。

根据的回答，我做了以下操作：

顶部组件

import React, {Component} from 'react'
import HeaderComponent from './HeaderComponent'
import TabComponent from './TabComponent'
import {Row, Col, Container} from 'reactstrap'
import './style.css'

export default class TopComponent extends Component {
    render() {
        return (
            <div className='vert-align'>
                <Container>
                    <Row><Col><HeaderComponent /></Col></Row>
                    <Row><Col><TabComponent /></Col></Row>
                </Container>
            </div>
        )
    }
}

style.css

.vert-align {
    top:0;
    position: fixed;
    z-index:100;
}

它们现在固定在顶部的一个下面，但是，它们现在没有覆盖整个屏幕的宽度！

Answer 1

在我看来，最简单的方法是为 HeaderComponent 和 TabComponent 创建一个父组件 FixedTopComponent，并将其固定到顶部 fixed=top。那么您只需在 css.

中使用 bootstrap 行或 {display: flex; flex-direction: column} 垂直对齐两个子组件

这是一个例子：

class FixedTopComponent extends React.Component {
    render() {
        const vert_align = {
            display: 'flex',
            flexDirection: 'column'
        }
        <div id='fixed-top" style={vert_align} fixed='top'>
            <HeaderComponent />
            <TabComponent />
        </div>
    }
}

编辑：对于你的第二个问题（不确定，因为我从未使用过 reactstrap），尝试：

import React, {Component} from 'react'
import HeaderComponent from './HeaderComponent'
import TabComponent from './TabComponent'
import {Row, Col, Container} from 'reactstrap'
import './style.css'

export default class TopComponent extends Component {
    render() {
        return (
            <Container fluid className='vert-align'>
                <Row><Col><HeaderComponent /></Col></Row>
                <Row><Col><TabComponent /></Col></Row>
            </Container>
        )
    }
}

React - 固定导航栏和导航标签

React - fixed navbar and nav-tab

reactjs

bootstrap-4

reactstrap