Javascript 我希望我的菜单根据我在React上的视图进行更新（reactdom.render的替代方案）

我现在确信我做错了，因为除非我打开开发工具，否则我的应用程序不会显示菜单

在我的登录页上，我有一个菜单栏，上面有应用程序名称/徽标、菜单项和我的Web应用程序中的登录按钮，如下所示：

我添加了main.html文件，其中包含：

<div id="render-target">
    <div id="header-container"></div>
    <div id="app-container"></div>
    <div id="footer-container"></div>
</div>

现在，用户可以选择一个表并从中加载数据，这会将它们带到另一个视图

因此，基本上从TableSelect视图中，用户单击一个复选框并加载一个TableLoad视图，该视图加载一个表以便以超级不正常的方式显示，因为它调用ReactDOM.render，document.getElementById'app-container'

然后，在TableDisplay视图中

componentDidUpdate() {
    ReactDOM.render(<MenuBar currentView="tableDisplay" rows={this.props.rows} cols={this.props.cols} tableId={this.props.tableId} />, document.getElementById('header-container'));
}

它使用当前数据属性调用菜单栏视图，或者更确切地说，替换DOM。下面是我想看到的，包括编辑按钮：

这似乎只是不可靠地触发。。。如果我打开了Chrome开发工具，这是不会失败的。我想这只是需要一些时间才能通过状态，我只在this.state.currentView！==loadTable&&this.props.cols！==未定义&this.props.rows！==未定义

我想我知道ReactDOM.render不是我想要的，但是我想显示菜单，即使我没有列/行数据，并且我需要在获得列/行数据后传递它。感觉菜单不需要数据信息，但为了向表中添加数据，我必须以某种方式拥有这些数据

---

我很清楚，我做很多事情都是用非反应的方式。我的应用程序目前在部署，代码在，如果有人知道有反应，感觉利他足以做代码审查让我知道。

< P>你可以考虑使用一个路由解决方案来帮助你，比如，你可以说在任何给定的路径上显示什么组件。您甚至可以接收路由参数，如表ID等，这些参数将告诉您要获取哪些数据以供显示。

React组件中唯一应该呈现任何内容的部分是呈现方法，当您的道具或状态发生更改时，将自动调用呈现方法。如果要有条件地渲染某些内容，请在渲染方法中使用条件。componentDidUpdate不是渲染东西的地方。这可能会帮助您确定不想在组件内的任何位置调用ReactDOM.render。这是最初呈现应用程序的函数，不需要多次调用。顺便说一句，在main.html中，您不需要-所有内部呈现都已处理完毕，所以就我所知，应该是这样，我只能在孩子和家长之间传递道具。我如何在兄弟姐妹之间传递它们？我有菜单栏和表选择，我需要在它们之间传递数据。。。

componentDidUpdate() {
    ReactDOM.render(<MenuBar currentView="tableDisplay" rows={this.props.rows} cols={this.props.cols} tableId={this.props.tableId} />, document.getElementById('header-container'));
}