我希望我的菜单根据我在 React 上的视图进行更新(替代 reactdom.render)
I want my menu to update based on which view I'm on React (alternative to reactdom.render)
我现在确信我做错了,因为除非我打开开发工具,否则我的应用程序不会显示菜单..
在我的登录页面上,我有一个菜单栏,其中包含应用程序 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 并且觉得自己足够无私地进行代码审查,请告诉我。
您可以考虑使用路由解决方案来帮助您解决问题,例如 react-router,您可以在其中说明在任何给定路由上要显示的组件。您甚至可以接收路由参数(如 table ID 等),它们会告诉您要获取哪些数据以供显示。
我现在确信我做错了,因为除非我打开开发工具,否则我的应用程序不会显示菜单..
在我的登录页面上,我有一个菜单栏,其中包含应用程序 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 并且觉得自己足够无私地进行代码审查,请告诉我。
您可以考虑使用路由解决方案来帮助您解决问题,例如 react-router,您可以在其中说明在任何给定路由上要显示的组件。您甚至可以接收路由参数(如 table ID 等),它们会告诉您要获取哪些数据以供显示。