如何使用React/Redux組件將2個模塊合併爲1？

Question

我有一個註冊模式，看起來像：

和登錄模式，看起來像：

現在，我讓他們爲2個獨立的反應的組分從我的NavBar作爲觸發如下：

<Nav pullRight className="navright"> 
    <NavItem eventKey={3} href="#">Stuff</NavItem> 
    <NavItem eventKey={4} href="#">Blog</NavItem> 
    <NavItem href="#" className={this.state.signedIn ? '' : 'hidden'}>{this.state.name}</NavItem> 
    <NavItem eventKey={2} href="#" className={this.state.signedIn ? 'hidden' : ''}><SignupModal/></NavItem> 
    <NavItem eventKey={1} href="#" className={this.state.signedIn ? 'hidden' : ''}><LoginModal/></NavItem> 
    </Nav> 

我想將它們組合成一個模態分量（可能稱爲AuthModal）和塔將加載所選的適當組件。

如果有問題，我正在使用react-bootstrap。我是React的新手，所以如果有什麼不清楚的地方，請讓我知道，我會澄清。

謝謝。

Answer 1

會給你一個想法。

你可以這樣設置它。

const Modal = ({ auth }) => { 
    if (auth) { 
    return { 
     <div>all your stuff here</div> 
    } 
    } 
    return { 
    <div>all your other stuff here</div> 
    } 
} 

所以，你打電話給你莫代爾像<Modal />，如果你需要將已授權一個你不喜歡<Modal auth={true} />

<Nav pullRight className="navright"> 
    <NavItem eventKey={3} href="#">Stuff</NavItem> 
    <NavItem eventKey={4} href="#">Blog</NavItem> 
    <NavItem href="#" className={this.state.signedIn ? '' : 'hidden'}>{this.state.name}</NavItem> 
    <NavItem eventKey={2} href="#" className={this.state.signedIn ? <Modal /> : <Modal auth={true} />}></NavItem> 
    </Nav> 

希望能幫助;）