小包で崩壊するdivを開くにはどうしたらいいですか？

Question

私は反応起動ストラップを持っています。ボタンをクリックすると開く/閉じるべきCollapse。また、私はReduxの派遣を通してそれを開きたいが、簡単にするために、私はbool値でプロパティを渡しています：

<App opennow={true} /> 

これは私のAppcomponentでrenderメソッドの一部です：

render() { 
    console.log('opennow', this.props.opennow) 

    //this.state.open = this.props.opennow; 
    console.log(this.state.open); 
    return (
     <div> 
     <Button onClick={ 
      ()=> 
     this.setState({ open: !this.state.open }) 
         }> 
      click 
     </Button> 
     <Collapse in={this.state.open}> 
      <div> 

どのようにすることができます私は既存の表示/非表示機能を維持し、ショーをトリガーします。つまり、この場合はプロパティを介してCollapseを開きますthis.props.opennow？あなたのクラスにcomponentDidMountを追加してください。Codepen

Answer 1

DOMが生成された後にコードを実行します。 opennow小道具をtrueとして渡された場合

componentDidMount(){ 
    if(this.props.opennow){ 
     this.setState({open:true}) 
    } 
    } 

それは条件をチェックし、状態にtrueにopenを設定します。

ここでは、アプリのブートストラップレベルからブール値を渡して、代わりにオープンし、崩壊のクローズを制御するためにReduxのを使用したくないcodepen