reactjs - 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 固定，但我不知道如何使下面的 TabComponent 固定 HeaderComponent。

---

基于this回答，我做了以下事情:

顶部组件

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

样式.css

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

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

Answer 1

我认为最简单的方法是为 HeaderComponent 和 TabComponent 创建一个父组件 FixedTopComponent，并将其固定到顶部固定=顶部。那么您只需使用引导行或 {display: flex; 垂直对齐两个子组件即可flex-direction: column} 在你的 css 中。

这是一个例子:

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