react.js根据子级更改父级宽度

Question

我已经使用react-bootstrap创建了一个NavigationBar组件，以便可以在我的项目中反复使用它。

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

哪个工作正常：

直到填充表格并出现水平滚动条。然后我想念完整的导航栏，就像这样：

我该如何解决？

Home.js

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

Answer 1

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

 <Table striped bordered hover responsive>

Answer 2

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