Question

我正在尝试在sessionStorage中使用“ isCollapse”变量来减少导航栏。通过单击按钮，我的sessionStorage发生了变化，但是渲染没有更新。

JSX代码

{
    sessionStorage.getItem("collapse") === "true" ?
    <div className="LeftMenu" style={{
        width: 45,
        float: "left",
        height: "100%",
        borderRight: "1px solid #dfe4e8",
        textAlign: "left",
    }}>
        <div className="tableElement">
            <FontAwesomeIcon icon={faHome} className="icon" />
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faTasks} className="icon" />
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faUsers} className="icon" />
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faTh} className="icon" />
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faArchive} className="icon" />
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faCopy} className="icon" />
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faNewspaper} className="icon" />
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faDownload} className="icon" />
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faFingerprint} className="icon" />
        </div>

    </div>
    :
    <div className="LeftMenu" style={{
        width: "12%",
        float: "left",
        height: "100%",
        borderRight: "1px solid #dfe4e8",
        textAlign: "left",
        minWidth: 200
    }}>
        <div className="tableElement">
            <FontAwesomeIcon icon={faHome} className="icon" /> Home
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faTasks} className="icon" /> Organisations
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faUsers} className="icon" /> Users
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faTh} className="icon" /> Templates Library
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faArchive} className="icon" /> Audit Trail
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faCopy} className="icon" /> Data Copy
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faNewspaper} className="icon" /> VAT Reporting
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faDownload} className="icon" /> Download add-in
        </div>
        <div className="tableElement">
            <FontAwesomeIcon icon={faFingerprint} className="icon" /> Account
        </div>
    </div>
}

我不知道这是否是最好的方法，但是如果我将sessionStorage设置为true并手动刷新，它将起作用。

编辑1：我试图像这样使用ComponentDidMount函数：

componentDidMount = () => {
    this.setState({
        isCollapse: sessionStorage.getItem("collapse")
    }, () => { console.log(this.state.isCollapse) })
}

但它也不起作用

编辑2：我没有指定，但是我的onClick函数和渲染不在保存文件中，我有一个按钮可以减少其他组件中的侧边栏，并且我想保留这个我所有网站的更改，这就是为什么我使用sessionStorage

Answer 1

您可以使用reducer或state来存储更改，因为状态或props发生更改时将进行渲染。 sessionStorage的更改不会触发渲染。请注意，对于此要求，使用会话存储是一种不好的做法。

//initialize a state

state = {
collapse:false
}

//set state on click
onClick={() => this.setState({collapse:!this.state.collapse})

//use state to show and hide

{this.state.collapse && <...content/>}

如果使用减速器，请执行以下步骤

1.create an action creators
2.dispatch an action
3.set state in store
4.connect state to the component diretly or by passing props

Answer 2

render（）方法将呈现此代码，但不会更新您需要使用setState的状态，您可以创建一个函数，该函数将检查isCollapse为true的先前状态，将其设置为false以及是否将其设置为set设置为false会使它变为true，因此它将用作触发按钮，根据先前的值使isCollapse为true或false。

changeIsCollapse() {
  if(sessionStorage.getItem('collapse') === 'true')
  { 
   this.setState({ 
    isCollapse: false
   }) 
  } else { 
   this.setState({ 
    isCollapse: true
  }) 
 }
}

在按钮的onClick内部，您可以调用此功能

onClick={this.changeIsCollapse.bind(this)}

sessionStorage不会更新页面

2 个答案: