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

Question

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

在我的登录页面上，我有一个菜单栏，其中包含应用程序 name/logo 以及菜单项和我的网络应用程序中的登录按钮，如下所示：

我通过让我的 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'));

现在，用户可以 select "table" 并从中加载数据，这会将他们带到不同的视图。

所以，基本上从 TableSelect 视图，用户单击一个复选框并加载一个 TableLoad 视图，它加载一个 table 用于显示（可能以一种超级不正确的方式，因为它调用 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'));
}

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

这似乎只会被不可靠地触发...（但如果我打开了 Chrome 开发工具，则不会失败）。我认为状态通过需要一些时间，我只显示菜单 if (this.state.currentView !== "loadTable" && this.props.cols !== undefined && this.props.rows !== undefined)。

我想我知道 ReactDOM.render 不是我想要的，但我想显示菜单，即使我没有 column/row 数据，我需要通过 column/row 数据一旦我得到它。感觉 Menu 不需要数据信息，但为了向 table 添加数据，我必须以某种方式获得该数据。

我很清楚我正在以非反应方式做很多事情。我的应用程序目前部署在 ideal-engine.herokuapp.com and the code is at github repo，如果有人知道 React 并且觉得自己足够无私地进行代码审查，请告诉我。

Answer 1

您可以考虑使用路由解决方案来帮助您解决问题，例如 react-router，您可以在其中说明在任何给定路由上要显示的组件。您甚至可以接收路由参数（如 table ID 等），它们会告诉您要获取哪些数据以供显示。

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

I want my menu to update based on which view I'm on React (alternative to reactdom.render)

javascript

html

reactjs

react-dom