freeCodeCamp/guide/chinese/certifications/front-end-libraries/react/render-with-an-ifelse-condition/index.md

title, localeTitle

title	localeTitle
Render with an If/Else Condition	使用If / Else条件渲染

使用If / Else条件渲染

方法

在组件的render方法内部，编写if / else语句，每个语句都有自己的返回方法，该方法具有不同的JSX。这使程序员能够根据各种条件呈现不同的UI。

首先，将当前返回方法包装在if语句中，并设置条件以检查变量'display'是否为true。请记住，您使用this.state访问状态。

解

if (this.state.display === true) { 
  return ( 
    <div> 
      <button onClick={this.toggleDisplay}>Toggle Display</button> 
      <h1>Displayed!</h1> 
    </div> 
  ); 
 } 

接下来，创建一个else语句，返回不带 h1元素的相同JSX。

else { 
  return ( 
    <div> 
      <button onClick={this.toggleDisplay}>Toggle Display</button> 
    </div> 
  ) 
 }