Question

请考虑以下代码段。现在点击按钮它会打开一个加载AnotherComponent的div-3。网址只是'http://localhost:3000/de'即Indexroot

我想要达到的目标是：如果我点击“http://localhost:3000/de/?open”，那么我希望面板即div-3已经打开。

class App extends React.Component {
  constructor(props) {
        super(props);

        this.state = {
            
            showThird: false
        }

        this.showDivThree = this.showDivThree.bind(this)
        /*if(props.location.search=="?open"){
            this.showDivThree()
        }*/
    }

    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>
<script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>

<div id="root"></div>

我评论了一个代码，我从props.location读取搜索字符串，如果它存在，那么我只需调用打开div-three的函数。但由于我有混合条件来打开div，它在某种程度上是行不通的。

我该如何解决这个问题？

Answer 1

您无法在setState中调用showDivThree（setState方法调用contructor），因为当构造函数被调用时，尚未安装组件。有关详细信息，请查看此 SO answer 您应该将if语句检查URL搜索字符串从constructor移动到componentDidMount方法，该方法在安装组件后立即调用，并且您可以安全地使用setState：

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

        this.state = {
            showThird: false
        };

        this.showDivThree = this.showDivThree.bind(this)
    }
    componentDidMount() {
        if (props.location.search == "?open") {
            this.showDivThree();
        }
    }
    ...
}

此外，我认为您的网址在搜索查询之前应该没有斜线。因此它应该是http://localhost:3000/de?open而不是http://localhost:3000/de/?open。

反应可共享的面板网址

1 个答案: