Question

我正在尝试用React创建一个简单的组件（我是一个新用户），我有一些麻烦来显示和隐藏div。我正在使用状态来处理点击和更改状态，这很好。问题是当我在浏览器中使用后退按钮并返回主页面时，我不知道如何处理状态更改，因为没有与用户交互。

我尝试使用位置上下文来更改状态，如果URL路径名===“/”，但它看起来像反应模式，因为我必须强制组件重新渲染并检查初始状态函数内的路径名。任何想法如何处理这种情况？

 // DIV on the main page
const Div = React.createClass({

  /*contextTypes: {
    location: React.PropTypes.object
  },*/

  getInitialState: function() {
      console.log("get initial state");
        return { hideDiv: false };
  },

   handleClick(){
    this.setState({ hideDiv: true });

  },

  render() {

    console.log(this.state.hideDiv);
    let componentDOM;

    if(this.state.hideDiv === true){ componentDOM = <div></div>;}
    else{
      componentDOM = <div id='showHide'>
                          <form>
                              <div>
                                  <select>
                                    <option> ... </option>
                                  </select>
                              </div>
                              //Link to a second page
                              <button type='submit' onClick={this.handleClick}> <Link to {'/destination'}>Submit</Link></button>
                          </form>
                      </div>;
    }
    return (componentDOM);
  }
});

Answer 1

要做到这一点，你应该使用localstorage来保存你的状态，例如：

handleClick: function(e) {
    this.setState({hideDiv: true});
    var state = this.state; // we need to add hideDiv with new value because setState could not update instantly
    state.hideDiv = true;
    localStorage.setItem('MyDivComponent', JSON.stringify(state));
}

然后，当组件挂载时，获取默认状态：

getInitialState: function() {
    var state = JSON.parse(localStorage.getItem('MyDivComponent')) || {};
    return {
        hideDiv: state.hideDiv || false
    };
}

Answer 2

我建议不要存储有关表单的组件是否在其自身状态下可见的信息。从您的描述中，我觉得这个信息在层次结构中属于更高级别 - Div组件本身无法决定它是否应该可见，因为这取决于某些上下文（URL /应用程序阶段）不知道。

我建议这样的事情：

var App = React.createClass({    
    //Data for the form, you might want to keep them in a store
    getInitialState(){ return {data: {}}; } 

    render(){
         //Pass data from your routing library to the props of App
         if(this.props.routingParams.url === 'form')
             return <Div data={this.state.data} onDataChanged={...} />
         else
            return <Destination data={this.state.data} />
    }
});

另外从Div完全删除状态和隐藏逻辑。

隐藏/显示div不起作用

2 个答案: