javascript - 如何在 reactJS 中处理 2 Header?

标签 javascript reactjs

我需要在我的应用程序中处理 2 个不同的 header :

  • 菜单
  • 一个带有标题的简单 Bar

  • 首先,我正在考虑使用本地存储来保存我想要显示的菜单(localStorage.setItem('menu', 'default’);)所以当我在一个不需要菜单而只是简单栏的组件中时,我只是像这样重置 localStorage : localStorage.setItem('menu', ‘bar’);
    但是这个想法(我知道这不是最好的)并没有重新渲染我的标题。
    我该怎么办?

    在我的渲染中,我有这样的东西:
    render() {
            let menu = localStorage.getItem('menu');
            return (
                <header>
                    {menu === 'bar' ? <TopBar/> : <MenuBar/>}
                </header>
            )
        }
    

    最佳答案

    您的 Header 不会重新渲染,因为它的 Prop /状态没有改变。您只更改了 localStorage这不会重新渲染您的组件。

    我可以向您建议两种方法:

    1. 根据您所在的路线,只需使用正确的标题:

    // Home.js
    const Home = props => <>
      <MenuBar />
      // The rest components of your page
    </>
    
    
    // Inside.js
    const Inside = props => <>
      <TopBar />
      // The rest components of your page
    </>
    

    2.如果您有<PageLayout />组件,您可以使用 prop 有条件地渲染 Header:
    <PageLayout />就是这样一个组件,在这里我们可以复用页面布局组件的组合。每个页面都有页眉、正文、页脚。与其在所有页面中复制相同的组件结构,不如将<PageLayout />中的布局结构抽象出来。 .
    const PageLayout = ({ header === 'default', children }) => <>
     <header>
       { header === 'bar' ? <TopBar /> : <MenuBar /> }
     </header>
     <body>
       {children}
     </body>
     <Footer />
    </>
    
    // Home.js - Here will use the `default` Header
    const Home = props => <PageLayout>
      // The rest components of your page
    </PageLayout
    
    // Inside.js - Here we will use <TopBar /> 
    const Inside = props => <PageLayout header='bar'>
      // The rest components of your page
    </PageLayout
    
    

    关于javascript - 如何在 reactJS 中处理 2 Header?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56582042/

    相关文章:

    javascript - 将对象插入到 React 中特定索引处的数组中

    javascript - 在React中返回错误消息

    javascript - 将 javascript 变量存储到数组中

    javascript - 如何在JQuery中的更改以及加载事件上运行语句?

    javascript - 我可以发布以ES和声风格的JavaScript导入的内容吗?

    css - CSS未在React和Webpack的生产中加载

    javascript - 如何管理独立 react 组件之间的通信?

    javascript - Javascript Jquery-如果单击子元素,则不要关闭

    javascript - Kendo UI , AutoComplete Max capacity is 1000. 我想增加这个

    javascript - 带有对象的转换器,数组通过函数传递变量