渲染反應組件onClick

Question

我是一個超級新人，但對它的潛力感到興奮。仍然要掌握它的基本原理，所以任何解釋都將不勝感激。

我正在尋找渲染一個'關於'組件，因爲用戶點擊'導航'組件中的一個按鈕（目的是爲了稍後切換該行）。

我已經嘗試做這件事我能想到的最簡單的方法，但是這顯然是非常錯誤的：

class Nav extends React.Component { 

renderAbout() { 
    return (
    <About /> 
); 
} 

render() { 
return (
    <div className="Nav"> 
    <div className="Button-Container"> 
    <div className="Nav-Text About-Button"> 
     <h2 onClick={() => this.renderAbout()}>About</h2> 
    </div> 
    </div> 
    </div> 
); 
} 
} 

這是否有事情做與更新的關於成分的「狀態」 ？

在此先感謝。

Answer 1

您可以使用狀態來定義是否必須呈現導入組件About。

class Nav extends React.Component { 

    state = { 
    isAboutVisible: false, 
    } 

    render() { 
    return (
    <div className="Nav"> 
     <div className="Button-Container"> 
     <div className="Nav-Text About-Button"> 
     <h2 onClick={() => this.setState({ isAboutVisible: true }) }>About</h2> 
     </div> 
     </div> 
     { this.state.isAboutVisible ? <About /> : null } 
    </div> 
    ); 
    } 
} 

Answer 2

是的，你必須改變組件的狀態。更改狀態將自動重新渲染組件。在你的榜樣應該是這樣的：

class Nav extends React.Component { 

state = { 
    showAbout: false; // initial state 
} 

renderAbout =() => { 
    if (!this.state.showAbout) return ''; 

return (
    <About /> 
); 
} 

// ES6 priavte method syntax 
handleButtonClick =() => { 
this.setState({showAbout: true}); 
} 

render() { 
return (
    <div className="Nav"> 
    <div className="Button-Container"> 
    <div className="Nav-Text About-Button"> 
     <h2 onClick={this.handleBtnClick}>About</h2> 
     {this.renderAbout()} 
    </div> 
    </div> 
    </div> 
); 
} 
} 

你也可以考慮使用例如這個包：https://www.npmjs.com/package/react-conditions

此外，請記住，有是每個監聽事件的方法應該啓動一個規則「處理」一詞。就像可能的例子。

Answer 3

您目前在實際視圖中沒有「關於」組件，您只是將它渲染到某處，在虛空中！

要正確渲染組件，您必須在JSX表達式中指定它的位置。此外，作爲最簡單的解決方案之一），您可能需要切換它。因此，這意味着這樣的事情：

constructor(props){ 
    super(props) 
    this.state={toggle:false} 
} 

renderAbout(toggle) { 
if(toggle) 
    return <About /> 
else return null; 
} 

render() { 
return (
    <div className="Nav"> 
    <div className="Button-Container"> 
     <div className="Nav-Text About-Button"> 
     <h2 onClick={() => this.setState({toggle: !toggle})}>About</h2> 
     </div> 
    </div> 
    {this.renderAbout(this.state.toggle)} 
    </div> 
); 
} 
}