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。如果click事件在同一组件中，则需要更改视图，因此需要close click事件才能在同一视图上加载其他组件。

此答案可能会帮助

How to unmount, unrender or remove a component, from itself in a React/Redux/Typescript notification message

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>
       )
   }
  }

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

3 个答案: