我想根据我在React上的视图来更新菜单（替代reactdom.render）

Question

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

在登录页面上，我有一个菜单栏，其中包含应用程序名称/徽标，菜单项以及Webapp中的登录按钮，如下所示：

我通过使main.html文件包含以下内容来添加该内容：

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

我的main.jsx文件的render()函数如下所示：

render(
    <div className='container'>
        <div id="header-container">
            <MenuBar />
        </div>

        <div id="app-container">
            <TableSelect />
        </div>

        <div id="footer-container">
        // some footer code
        </div>
    </div>,
    document.getElementById('render-target'));

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

因此，基本上从TableSelect视图中，用户单击一个复选框并加载一个TableLoad视图，该视图将加载一个表以进行显示（可能以一种超级不行的方式，因为它调用ReactDOM.render(<TableDisplay tableId={this.props.id}/>,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）调用MenuBar视图。 我想看到的内容如下，包括“编辑”按钮：

这似乎只会以不可靠的方式被触发...（但是，如果我打开了Chrome开发工具，就会成功）。 我认为状态通过需要花费一些时间，并且仅在以下情况下显示菜单： if (this.state.currentView !== "loadTable" && this.props.cols !== undefined && this.props.rows !== undefined) 。

我想我知道ReactDOM.render不是我想要的，但是我想显示菜单，即使我没有列/行数据，一旦获得它也需要传递列/行数据。 感觉菜单不需要数据信息，但是为了将数据添加到表中，我必须以某种方式获取该数据。

---

对我来说，很明显，我以非反应方式做很多事情。 我的应用程序当前部署在Ideal-engine.herokuapp.com上 ，并且代码位于github repo上 ，如果任何了解React并感到无私的人可以进行代码审查的话都可以告诉我。

Answer 1

您可能会考虑使用路由解决方案来帮助您，例如react-router ，您可以在其中说出在任何给定路线上显示的组件。 您甚至可以接收路由参数（如表ID等），这些参数将告诉您要获取哪些数据以进行显示。