react.js 根据孩子改变父宽度

Question

I have created a NavigationBar component using react-bootstrap , so that I can use that over and over in my project.

NavigationBar :

<div>
  <NotificationContainer />
  <Navbar bg="dark" variant="dark">
    <Navbar.Brand href="/home">Local File Server</Navbar.Brand>
    <Navbar.Collapse className="justify-content-end" />
    <Form inline>
      <FormControl type="text" placeholder="Search" className=" mr-sm-2" />
      <Button type="submit">Search</Button>
      <Button variant="danger" type="submit" href="/upload">
        Upload
      </Button>
    </Form>
  </Navbar>
</div>;

Which works fine :

Until, table gets populated and horizontal scrollbar appears. Then I miss the complete navigation bar, like this :

How can I resolve this ?

Home.js

components : https://github.com/maifeeulasad/Local-File-Server/tree/master/local_file_server/src/component

Answer 1

我认为向 Table props 添加“响应式”是最简单的解决方法

 <Table striped bordered hover responsive>

Answer 2

我从互联网上找到了一种方法，通过将回调函数作为道具传递给孩子。