React 简单实现 v-if和v-show的元素控制效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了React 简单实现 v-if和v-show的元素控制效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

react中并没有直接的想模板引擎那样的命令可以直接控制元素展示
但是我们了解了 v-if和v-show之后还是大有文章的

我们在项目的 src下创建 components 文件夹创建dom.jsx
编写代码如下

import React from "react"
export default class dom extends React.Component {

    componentWillUnmount(){
      console.log("组件销毁");
    }
    
    render(){
      return (
        <div>
          子组件在此
        </div>
      )
    }
}

这里我们定义了 componentWillUnmount 因为我们知道 v-if 是会直接将元素从dom树上干掉的
那么他的componentWillUnmount 将组件移除的生命周期自然就会执行
我们在src下的 App组件编写代码如下

import React from "react"
import Dom from "./components/dom"
export default class App extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        chas: true,
        show: true
      }
    }
    render(){
      return (
        <div>
          <button onClick={ ()=> { this.setState({show: !this.state.show }) } }>更改show</button>
          <div style = { {display: this.state.show?"":"none" }}>
              show元素
          </div>
          <button onClick={ ()=> { this.setState({chas: !this.state.chas }) } }>更改chas</button>
          {
            this.state.chas?<Dom/>:null
          }
        </div>
      )
    }
}

v-show上面也写了只是借助了 css隐藏那么我们直接控制它style中的display就好了
然后 v-if 我们直接用三元运算符实现
如果条件不成立直接给个 null
我们运行
React 简单实现 v-if和v-show的元素控制效果
我们先点更改show
试一下 v-show 模仿的功能

我们的元素就被 css隐藏了
React 简单实现 v-if和v-show的元素控制效果
然后我们点击更改chas

可以看到我们之前监听的 componentWillUnmount 确实是执行了然后我们看dom树
这个元素就确实是被干掉了 dom树已经找不到了
文章来源地址https://www.toymoban.com/news/detail-505778.html