对条件div

Question

请考虑以下代码段：

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

        this.state = {
            
            showThird: false
        }

        this.showDivThree = this.showDivThree.bind(this)
    }

    showDivThree() {

        this.setState(prevState => ({ showSecond: false, showThird: !prevState.showThird}))
        console.log(this.state)
    }
  
  render() {
    return (
       <div className={'wrapper' + ( this.state.showThird ? ' show' : '')}>

                <div className="one">one
                    

                    {/* Show third */}
                    <div>
                        <button onClick={this.showDivThree}>{this.state.showThird ? 'hideThird' : 'showThird'}</button>
                    </div>
                </div>

                <div className="three">three
                    <div>
                        <button onClick={this.showDivThree}>{this.state.showThird ? 'hideThird' : 'showThird'}</button>
                        
                        <AnotherComponent />
                    </div>
                </div>

            </div>
    )
  }
}

class AnotherComponent extends React.Component {
  constructor(props) {
        super(props);

        this.state = {   
            
        }
       
    }

  
  render() {
    return (
       <div>
        <h4>Another component</h4>
       </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

.wrapper {
  overflow: hidden;
  white-space: nowrap;
}

.one, .two, .three {
  background: #333;
  border: 2px solid #787567;
  box-sizing: border-box;
  color: #fff;
  display: inline-block;
  font-family: arial;
  overflow: hidden;
  padding: 20px;
  text-align: center;
  transition: border 0.2s, padding 0.2s, width 0.2s;
  min-height: 50vh;

}

.one {
  width: 100%;
}
.two {
  border-width: 2px 0;
  padding: 20px 0;
  width: 0;
}

.three {
  border-width: 2px 0;
  padding: 20px 0;
  width: 0;
}

.show .one, .show .two, .show .three {
  border-width: 2px;
  padding: 20px;
  width: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

我想在这里实现路由。我正在使用react-router并考虑全屏div-one在索引路由'/'。当我点击showThird时，它基本上会打开另一个div并在其中加载AnotherComponent。我希望我的路线改变为'/ another'。

我的目标是这样的url'/ another'是可共享的，当有人点击该url时，他已经看到了正确的两个半页div，而AnotherComponent加载在右半部分。

我怎样才能实现他的目标？

Answer 1

我认为从VK_NUMPAD1到/完全改变路线并不是一个好主意。由于您并未真正更改页面，而只是在/another上打开一个面板，因此更改路径在语义上并不正确。

相反，如果要使开放面板行为可共享，则只需设置一个将附加到网址的查询参数，并且只需在安装组件时检查它是否存在。

对于所有路由组件，react-router在App中提供了一个对象location，它将包含您可以在构造函数中设置初始值的查询参数。

点击舔打开面板，你只需要调用反应路由器的props方法来添加你的查询字符串，并在面板关闭时调用它以将其删除。

push