渲染反应组件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> 
); 
} 
}