javascript - 我希望我的菜单根据我在 React 上的 View 进行更新(reactdom.render 的替代方案)

Question

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

在我的登陆页面上，我有一个菜单栏，其中包含应用程序名称/ 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'));

现在，用户可以选择一个“表”并从中加载数据，这会将他们带到不同的 View 。

所以，基本上来自 TableSelect View 中，用户单击一个复选框并加载 TableLoad view，它加载一个表格进行显示(可能以一种 super 不好的方式，因为它调用 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具有当前数据属性的 View (或者更确切地说，替换 DOM)。我想看到的内容如下，包括“编辑”按钮:

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

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

<小时/>

我很清楚我正在以非 react 方式做很多事情。我的应用程序当前部署在ideal-engine.herokuapp.com代码位于github repo ，如果有人了解 React 并且愿意进行代码审查，请告诉我。

Answer 1

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