思考的陣營：如何有父可以打開/關閉

Question

我仍然有麻煩流消息作出反應的角度來思考的通知窗格。我想達成的目標是擁有一個具有右下角（BackgroundActivity），它可以通過Layout打開後臺活動窗格父組件（Layout），但也有其自己的用於切換打開控制/關閉。這裏就是我這麼遠，但它不工作：

Layout = React.createClass({ 
    getInitialState() { 
    return {showBackgroundActivity: false} 
    }, 

    render() { 
    return (
     <div className="layout"> 
     <Toolbar /> 

     <div className="content"> 
      <div className="container-fluid"> 
      {React.cloneElement(this.props.content, this.data)} 
      </div> 
     </div> 

     <BackgroundActivity visible={this.state.showBackgroundActivity} /> 
     </div> 
    ) 
    } 
}); 

BackgroundActivity = React.createClass({ 
    handleToggle() { 
    this.setState({expanded: !this.state.expanded}); 
    }, 

    componentWillMount() { 
    this.setState({expanded: this.props.visible}); 
    }, 

    render() { 
    let classesPane = classNames({ 
     'background-activity': true, 
     'expanded': this.state.expanded 
     }), 
     classesExpandBtn = classNames({ 
     'fa': true, 
     'fa-chevron-down': this.state.expanded, 
     'fa-chevron-up': !this.state.expanded 
     }); 

    return (
     <div className={classesPane}> 
     <i onClick={this.handleToggle} className={classesExpandBtn}></i> 

     <div className="processes"> 
     </div> 
     </div> 
    ) 
    } 
}); 

所以，問題是，它最初會聽任何visible道具傳遞中，但在那之後，如果Layout的showBackgroundActivity狀態的變化，因爲BackgroundLayout的渲染方法不關注visible道具，只是expanded狀態。我只能使用道具，但如果我點擊擴展器，我沒有辦法改變道具（我可以使用setProps，但由於改變道具編程不是好的形式，這已被棄用）。

我知道這可能是簡單的，但我沒有得到它。必須有某種方式讓用戶通過單擊它來展開/摺疊BackgroundActivity，但也可以在某些事件時提供擴展它的功能Layout。

Answer 1

移動擴大到家長和它當作道具對孩子的控制。然後在擴展更改時向BackgroundActivity添加事件調用。

Layout = React.createClass({ 
    getInitialState() { 
    return {expanded: false} 
    }, 
    onExpandedChange(expanded) { 
    this.setState({expanded: expanded}); 
    }, 
    render() { 
    return (
     <div className="layout"> 
     <Toolbar /> 

     <div className="content"> 
      <div className="container-fluid"> 
      {React.cloneElement(this.props.content, this.data)} 
      </div> 
     </div> 

     <BackgroundActivity expanded={this.state.expanded} onExpandedChange={this.onExpandedChange} /> 
     </div> 
    ) 
    } 
}); 

BackgroundActivity = React.createClass({ 
    handleToggle() { 
    this.props.onExpandedChange(!this.props.expanded); 
    }, 

    render() { 
    let classesPane = classNames({ 
     'background-activity': true, 
     'expanded': this.props.expanded 
     }), 
     classesExpandBtn = classNames({ 
     'fa': true, 
     'fa-chevron-down': this.props.expanded, 
     'fa-chevron-up': !this.props.expanded 
     }); 

    return (
     <div className={classesPane}> 
     <i onClick={this.handleToggle} className={classesExpandBtn}></i> 

     <div className="processes"> 
     </div> 
     </div> 
    ) 
    } 
});