react怎么实现点击隐藏显示

react实现点击隐藏显示的方法：1、使用style来显示隐藏，代码如“{{display:this.state.isshow?'block':'none'}}”；2、使用三元运算符实现隐藏显示，代码如“this.state.isshow?(...):(...)”；3、通过短路逻辑进行元素显示隐藏，代码如“this.state.isshow&&

...

”。

本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。

react怎么实现点击隐藏显示？

react中元素的显示和隐藏方式的使用 

<script>
class App extends React.Component {
    state={
        isShow:false,
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }
  render() {
    return (
      <div>
        {/*第一种方式，用style来显示隐藏*/}
        <button style={{display:this.state.isShow?&#39;block&#39;:&#39;none&#39;}}>张云龙
        <button style={{display:this.state.isShow?&#39;none&#39;:&#39;block&#39;}}>秦霄贤
        <button onClick={this.check}>点击切换
      </script>

block表示显示，none表示隐藏 

第二种：用三元运算符

<script>
class App extends React.Component {
    state={
        isShow:false,
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }
  render() {
    return (
      <div>

        {/*第二种方法，用三元运算符*/}
            {
            this.state.isShow?(<div>秦霄贤):(<div>张云龙)
            }
        <button onClick={this.check}>点击切换
      
    )
  }
}
ReactDOM.render(<App/>,document.getElementById(&#39;root&#39;))</script>

第三种：通过短路逻辑进行元素显隐

<script>
class App extends React.Component {
    state={
        isShow:false,
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }
  render() {
    return (
      <div>
        {/*第三种方式*/}
          {
            this.state.isShow && <div>秦霄贤
        }
        {
            !this.state.isShow && <div>张云龙
        }
        <button onClick={this.check}>点击切换
      
    )
  }
}
ReactDOM.render(<App/>,document.getElementById(&#39;root&#39;))</script>

第四种：函数形式

<script>
class App extends React.Component {
    state={
        isShow:false,
        love:&#39;秦霄贤&#39;
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }

    loves=(key)=>{
        switch(key){
            case &#39;秦霄贤&#39;:
                return <div>秦霄贤
            case &#39;张云龙&#39;:
                return <div>张云龙
        }   
    }

  render() {
    let ok=this.loves(this.state.love)
    return (
      <div>
        {/*第四种函数形式*/}
        {ok}
        <button onClick={this.check}>点击切换
      
    )
  }
}
ReactDOM.render(<App/>,document.getElementById(&#39;root&#39;))</script>

推荐学习：《react视频教程》