React V6实现v-if、v-show、v-html

9月前作者：_小郑有点困了分类：Toy博客阅读(37) 违法举报

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

功能背景

在vue中使用v-if、v-show、v-html这些命令得心应手，那么react是否也存在这样的命令呢？似乎是没有的，需要自己实现，也就是用原生的写法直接控制dom。

实际效果

React V6实现v-if、v-show、v-html
文章来源地址https://www.toymoban.com/news/detail-510510.html

代码实现

const [dialogVisible, setDialogVisible] = useState(false);
//实现v-html
  const htmlString = '<strong>Hello, World!</strong>';




<hr/>
      <p>v-if原生写法实现</p>
      {/* 使用if语句 */}
      {dialogVisible && <p>This element is visible using if statement</p>}

      {/* 使用三元表达式 */}
      <p>v-if三元表达式原生写法实现</p>
      {dialogVisible ? <p>This element is visible using ternary expression</p> : null}

      {/* 使用v-show方式 */}
      <p>v-show原生写法实现</p>
      <p style={{ display: dialogVisible ? 'block' : 'none' }}>This element is visible using v-show style</p>


      <p>v-html原生写法实现</p>
      <div dangerouslySetInnerHTML={{ __html: htmlString }} />

到了这里，关于React V6实现v-if、v-show、v-html的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

VUE v-if 和 v-show 区别和例子

在Vue中，v-if和v-show是两种常用的指令，用于控制组件的显示和隐藏。下面是一些使用v-if和v-show的例子： v-if 在编译过程中会被转化成三元表达式,条件不满⾜时不渲染此节点。 v-show 会被编译成指令，条件不满⾜时控制样式将对应节点隐藏（display:none） v-if html template di

2024年01月22日
浏览(38)
Vue 中 v-if 和 v-show 的区别

v-if 和 v-show 是 Vue.js 中常用的条件渲染指令，它们的作用是根据条件来控制元素的显示与隐藏。格式也差不多：当 isShow 为 true 时显示当前元素，为 false 时隐藏虽然它们的效果类似，但是它们在实现原理和使用场景上有一些区别。 1. 实现原理： v-if ：根据条件动态添加

2024年02月16日
浏览(33)
Vue中v-if与v-show区别详解

在当今Web开发领域中，构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架，正是为了满足这些需求而诞生。它采用了MVVM架构模式，并通过数据驱动和组件化的方式，使我们能够更轻松地构建出优雅而高效的Web应用程序。

2024年01月21日
浏览(41)
vue: v-show 和 v-if 指令控制盒子的显示隐藏

1. v-show 语法: v-show=\\\"布尔值\\\" (true显示, false隐藏) 原理: 实质是在控制元素的 css 样式, `display: none;` 2. v-if 语法: v-if=\\\"布尔值\\\" (true显示, false隐藏) 原理: 实质是在动态的创建或者删除元素节点应用场景: 1. 如果是频繁的切换显

2024年02月09日
浏览(58)
Vue.js 中的 v-if 和 v-show 有什么区别？

在 Vue.js 中，v-if 和 v-show 都是用来控制元素的显示和隐藏的指令。但是，它们之间有一些区别。本文将深入探讨 v-if 和 v-show 的区别，并给出一些相关的代码示例。 v-if 是一种条件渲染指令，它根据表达式的值来决定是否渲染元素。如果表达式的值为 true，那么元素将被渲染；

2024年02月08日
浏览(45)
vue中v-if和v-show的区别和使用场景

问题：v-if和v-show我们都经常用来控制某一部分内容的显示与隐藏，那么其具体区别是什么呢？ 1.v-if v-if是通过增添和删除DOM来控制元素的显示与隐藏的当判断值为true时在DOM树中加入该DOM元素当判断值为false时在DOM树中删除该DOM元素 2.v-show v-show是通过改变该元素

2024年02月03日
浏览(31)
vue基础知识六：v-show和v-if有什么区别？使用场景分别是什么？

一、v-show与v-if的共同点我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示在用法上也是相同的当表达式为true的时候，都会占据页面的位置当表达式都为false时，都不会占据页面位置二、v-show与v-if的区别控制手段不同编译过程

2024年02月09日
浏览(39)
GuLi商城-前端基础Vue-指令v-if、v-show、v-else、v-else-if

2024年02月12日
浏览(42)
v-show和v-if的区别以及显示隐藏不生效的奇怪现象以及点击索引错位问题的解释

基本概念没什么好讲的。有时候会遇到莫名其妙不显示的问题，这都是因为对这两个概念理解不透彻造成的。 v-show的本质就是通过调用css的display:none来实现的，这点非常重要，出问题可以在浏览器调试页面手动设置display:none来验证到底v-show有没有生效。下面的代码是uview的一

2024年02月17日
浏览(42)
FE_Vue学习笔记条件渲染[v-show v-if] & 列表渲染[v-for] 列表过滤列表排序

使用template可以使其里面的内容在html的结构中不变。条件渲染： v-if 1）v-if=“表达式” 2）v-else-if=“表达式” 3）v-else {} 适用于：切换频率较低的场景。特点：不展示的DOM元素直接被移除。注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”。 v-show 写法：

2024年02月05日
浏览(36)