一种通过在React中使用localstorage来显示组件一次的方法

Question

我有一个组件，一旦用户加载网站，我就想显示。然后，如果他们单击以关闭，则不应显示。使用componentDidmount（），最好的方法是什么？我认为单击状态应在componentDidmount中？

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            wasShown: false
         }
         console.log(this.props)
    }
    componentDidMount() {
    }
    render(){
        return ( 
            <div>
                {  !wasShown ? <MyComponent /> : '' } 
            </div>
        );
    }
};

Answer 1

我希望这项工作。

class App extends Component {
    constructor(props){
        super(props);

        this.state = {
            wasShown: localStorage.getItem("wasShown") ? true : false
        }
    }
    close() {
        localStorage.setItem('wasShown', 'true')
        this.setState({ wasShown: true })
    }
    render() {
        return ( 
            <div>
                {  !wasShown ? <MyComponent onClick={this.close.bind(this)} /> : '' } 
            </div>
        )
    }
}

Answer 2

考虑以下内容，其中组件状态根据您本地商店的状态在构造函数中初始化：

：

class App extends Component {
    constructor(props){
        super(props);
        /* Initialise component state from local store state outright */
        this.state = {
            wasShown: localStorage.getItem('wasShown') ? true : false
        }
    }
    /* Example class method showing how close logic might be defined */
    onClickClose() {
        /* Persist updated value to "wasShown" key in store for recall
        on next reload */
        localStorage.setItem('wasShown', 'true')            
        /* Update internal state in response to click to hide
           immediately hide component */            
        this.setState({ wasShown : true })
    }
    /* 
    Not needed
    componentDidMount() { }
    */
    render(){
        const { wasShown } = this.state;
        return wasShown ? null : <MyComponent onClick={this.onClickClose.bind(this)} />
    }
};

构造函数中初始化状态有两个主要优点：

• 避免需要集成到生命周期钩中
• 避免呼叫setState()，该呼叫需要重新渲染组件

希望有帮助！

Answer 3

如果要给用户选项关闭组件。它可以通过多种方式完成。

1.将关闭组件的按钮或单击事件将位于其他将安装的组件中。例如侧边栏菜单。

2.如果单击事件在相同的组件中，您需要更改视图，因此您需要关闭点击事件将其他组件加载在同一视图上。

此答案可能会有所帮助

如何在react/redux/typescript通知消息中自行卸载，无效或删除组件

render(){
    const { wasShown } = this.state;
    return !localStorage.getItem('wasShown') ? null : <MyComponent/>  
}

class MyComponent extends Component{
  render{
    return(
         <div> <button onClick={ ()=>{
              localStorage.setItem('wasShown',true);
              }}/> 
         </div>
       )
   }
  }