Reactjs 反应-固定导航栏和导航选项卡

我正在为我的项目使用

reactstrap

包。因此，我创建了一个

HeaderComponent

，它是一个

Navbar

，固定在顶部

fixed=top

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;

我正在使

标题组件

固定，但我不知道如何使

标题组件下方的
选项卡组件
固定


根据答案，我做了以下工作：

TopComponent

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

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

在我看来，最简单的方法是为
HeaderComponent
和
TabComponent
制作一个父组件
FixedTopComponent
，并将此组件固定到顶部
fixed=top
。然后，您只需使用引导行或css中的
{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>
    }
}

类FixedTopComponent扩展React.Component{
render（）{
常数垂直对齐={
显示：“flex”，
flexDirection:“列”
}
谢谢。我如何解决我在问题中所做的更新？不客气。请查看我为您的新问题编辑的答案。此外，如果此答案解决了您的问题，您是否可以接受（绿色勾号）？收到非布尔属性
fluid
的
true
。根据这一点，这很奇怪：它应该是一个布尔属性。但我真的不知道reactstrap，所以除非你真的需要让它与bootstrap一起工作，否则你可以像我的第一个代码片段一样使用flex，它必须是
。添加
fluid
>使布尔值为真。也许可以将其添加到您的答案中！谢谢！
.vert-align {
    top:0;
    position: fixed;
    z-index:100;
}

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

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