React-条件渲染

导语：在React中，常用的条件语句有if语句、三元操作符、逻辑(&& ||)语句、switch...case等。本节内容我们将介绍在React中条件语句的使用。

查看当前页面的效果图:

我们要实现的功能为：通过点击按钮控制下面内容的显示隐藏。

第一步，定义一个state用来控制Person组件是否显示：

showPersons:false

第二步，给Person组件一个容器，并判断状态进行渲染，在{ }中定义逻辑代码：

return (

{

changed=

name=

age=>

:null

} )

上面这段代码的书写形式我们在实际开发中并不主张，这时return 中的内容过于冗余，可以将以上代码修改为如下形式：

render() {

letpersons=null;

persons= (

changed=

name=

age=>

)

}

return(

{persons}

)

}

上面定义了一个persons变量，根据状态修改persons的值。

第三步，定义事件修改状态值：

togglePersonsHandler= ()=>{

this.setState({

})

}

第四步，绑定事件：

更改状态值

最后我们在浏览器中查看，就可以实现点击按钮控制下面组件的显示隐藏功能。

结语：下节内容我们将介绍React中循环的使用。感谢大家的关注。