twitter-bootstrap - 如何通过 prop 打开折叠的 div？

Question

我有一个react-bootstrap Collapse，单击按钮时应该打开/关闭。我还想通过 redux 调度打开它，但为了简单起见，我传递了一个带有 bool 值的属性:

 <App opennow={true} />

这是我的应用程序组件中渲染方法的一部分:

 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>

如何保留现有的显示/隐藏功能并触发显示，即通过属性(在本例中为 this.props.opennow)打开折叠？这是Codepen

Answer 1

在您的类中添加一个componentDidMount。它在生成 DOM 后运行代码。

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

如果 opennow 属性作为 true 传递，它会检查条件并将状态中的 open 设置为 true。

这是codepen