JSX条件渲染（四）——形式4种：js形式条件渲染 & 元素变量 & 行内条件渲染 & 阻止渲染

最新推荐文章于 2024-01-17 14:35:09 发布
最新推荐文章于 2024-01-17 14:35:09 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： react知识 文章标签： js reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44867717/article/details/112342897
版权

JSX条件渲染——形式4种：js形式条件渲染 & 元素变量 & 行内条件渲染 & 阻止渲染

  • js形式条件渲染
function showForm (flag) {
  // 根据参数flag的状态显示不同内容
  if(flag) {
    // 显示登陆框
    return <div>登陆框</div>
  } else {
    // 显示注册框
    return <div>注册框</div>
  }
}
  • 元素变量
function showForm (flag) {
  // 根据参数flag的状态显示不同内容
  let form = null;
  if(flag) {
    form = <div>登陆</div>
  } else {
    form = <div>注册</div>
  }
  return form
}
  • 行内条件渲染
function showForm (flag) {
  // return <div>{flag? '登陆': '注册'}</div>
  // return <div>{flag ? <div>登陆</div>: <div>注册</div>}</div>
  return <div>{flag && <div>条件成立就显示</div>}</div>
}
  • 阻止渲染
function showForm (flag) {
  if (flag) {
    return null;
  }
  return <div>阻止渲染</div>
}

文件结构

在这里插入图片描述

公共html文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="./style/style.css">
  <!-- 第一步：引入相关js库文件 -->
  <script type="text/javascript" src="./lib/react.development.js"></script>
  <script type="text/javascript" src="./lib/react-dom.development.js"></script>
  <!-- babel文件的作用：编译React代码，使之变成原生js代码才可以在浏览器中运行 -->
  <script type="text/javascript" src="./lib/babel.min.js"></script>
</head>

<body>
  <!-- 第二步：页面中需要提供一个容器 -->
  <div id="root"></div>
  <!-- 第三步：可以基于React实现前端功能 -->
  <script type="text/babel" src="./js/05-JSX条件渲染.js"></script>
</body>

</html>

在VScode中，在VScode中打开，需安装插件Live Server，右键打开Open With Live Server,打开页面

实例01-js形式条件渲染

js文件

/*
  JSX条件渲染
*/
// js形式条件渲染
function showLoginOrRegisterForm (flag) {
  // 条件渲染
  if (flag) {
    // 登录表单
    return (
      <div>登录表单</div>
    )
  } else {
    // 注册表单
    return (
      <div>注册表单</div>
    )
  }
}
//此处为空或false时，显示为——注册表单；true时——登录表单
let element = <div>{showLoginOrRegisterForm(false)}</div>

ReactDOM.render(element, document.getElementById('root'))

显示

在这里插入图片描述

实例02- 元素变量

js文件

/*
  JSX条件渲染
*/
// js形式条件渲染
// function showLoginOrRegisterForm (flag) {
//   // 条件渲染
//   if (flag) {
//     // 登录表单
//     return (
//       <div>登录表单</div>
//     )
//   } else {
//     // 注册表单
//     return (
//       <div>注册表单</div>
//     )
//   }
// }

// 元素变量
function showLoginOrRegisterForm (flag) {
  // 条件渲染
  let form = null
  if (flag) {
    form = <div>登录表单</div>
  } else {
    form = <div>注册表单</div>
  }
  return form
}
//此处为空或false时，显示为——注册表单；true时——登录表单
let element = <div>{showLoginOrRegisterForm(true)}</div>

ReactDOM.render(element, document.getElementById('root'))

显示结果同上

在这里插入图片描述

实例03-行内条件渲染

js文件

/*
  JSX条件渲染
*/
// js形式条件渲染
// function showLoginOrRegisterForm (flag) {
//   // 条件渲染
//   if (flag) {
//     // 登录表单
//     return (
//       <div>登录表单</div>
//     )
//   } else {
//     // 注册表单
//     return (
//       <div>注册表单</div>
//     )
//   }
// }

// 元素变量
// function showLoginOrRegisterForm (flag) {
//   // 条件渲染
//   let form = null
//   if (flag) {
//     form = <div>登录表单</div>
//   } else {
//     form = <div>注册表单</div>
//   }
//   return form
// }

// 行内条件渲染
function showLoginOrRegisterForm () { 
    // true-显示女；false-显示男
  let gender = true
  return <div>{gender? <div>男<input type="radio"/></div> : <div>女<input type="radio"/></div>}</div>
}

//默认为空
let element = <div>{showLoginOrRegisterForm()}</div>

ReactDOM.render(element, document.getElementById('root'))

显示

在这里插入图片描述

实例04-阻止渲染

js文件

/*
  JSX条件渲染
*/
// js形式条件渲染
// function showLoginOrRegisterForm (flag) {
//   // 条件渲染
//   if (flag) {
//     // 登录表单
//     return (
//       <div>登录表单</div>
//     )
//   } else {
//     // 注册表单
//     return (
//       <div>注册表单</div>
//     )
//   }
// }

// 元素变量
// function showLoginOrRegisterForm (flag) {
//   // 条件渲染
//   let form = null
//   if (flag) {
//     form = <div>登录表单</div>
//   } else {
//     form = <div>注册表单</div>
//   }
//   return form
// }

// 行内条件渲染
// function showLoginOrRegisterForm () { 
//   let gender = false
//   return <div>{gender? <div>男<input type="radio"/></div> : <div>女<input type="radio"/></div>}</div>
// }

// 阻止渲染
function showInfo (flag) {
    //flag为false-显示文字；为true-显示空/白屏
  if (flag) {
    return null
  }
  return <div>阻止渲染</div>
}

// let element = <div>{showLoginOrRegisterForm()}</div>
let element = <div>{showInfo(false)}</div>

ReactDOM.render(element, document.getElementById('root'))

显示

在这里插入图片描述

viceen
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-cond:React 的条件渲染组件
07-13
React条件 使用成对的 [boolean, Component] 有条件地渲染组件。 用法 将此包安装到您的项目中。 使用 CommonJS： var Cond = require ( 'react-cond' ) ; var YourComponent = React . createClass ( { render : function ( ) { < div> < Cond xss=removed> { 3 === 3 } < h1> Conditionals in my JSX? < / h1 > { 1 !== 1 } < h3> pls no < / h3 > { 2 !== 1 } YASSSSSSS { 1 === 1 } < p>医
vue 渲染函数 & JSX
01-07
渲染函数 render 通过渲染函数渲染组件 Vue.component('myComponent', { render (h) { // createElement return h( 'div', // HTML tag、自定义组件、异步组件 { // 属性对象 attrs: { // 标签属性 id: 'wrap' }, class: { // 类名 'my-com': true }, props: { // DOM 属性，prop
React基础-JSX语法条件渲染详解
m0_71485750的博客
09-20 8148
逻辑与运算符&&, 适合如果条件成立，渲染某一个组件;如果条件不成立，什么内容也不渲染;主要是控制display属性是否为none, 在React中也可以实现v-show的效果。在React中，所有的条件判断都和普通的JavaScript代码一致;例如下面代码表示student有值的时候才会渲染, 没有值什么也不渲染。在vue中，我们会通过指令来控制:比如v-if、v-show;方式一: 条件判断语句判断, 适合逻辑较多的情况。方式二: 三元运算符判断, 适合逻辑比较简单。类似于Vue中v-if的效果。
react：在jsx中使用js表达式、列表渲染、条件渲染、样式处理以及jsx注意事项
最新发布
Y200195的博客
01-17 463
JSX必须有一个根节点，如果没有根节点，可以使用（幽灵节点）替代(react的独特标签）
React 条件渲染最佳实践小结(7种)
01-18
在 React 中，条件渲染可以通过多种方式，不同的使用方式场景取决于不同的上下文。 在本文中，我们将讨论所有可用于为 React 中的条件渲染编写更好的代码的方法。 条件渲染在每种编程语言（包括 javascript）中都是的常见功能。 在 javascript 中，我们通常使用if else 语句，switch case语句和三元运算符编写条件渲染。 以上所有这些方法都适用于 React。 但是问题是，我们如何才能有效地使用它们？ 像你知道的那样，React 具有 JSX 标记，通常我们需要实现条件逻辑去控制组件。 但是，我们不能在 JSX 中直接使用常见的 if else或switch
04-JSX数据渲染
舍予
05-31 311
JSX 数据渲染
react JXL的条件渲染
m0_45877477的博客
07-13 92
条件渲染:根据条件渲染特定的JXL结构 1 if else 2 三元运算符 3 逻辑与
在jsx中使用循环渲染
魂断@蓝桥的博客
02-09 3156
在jsx语法中使用循环渲染，主要使用场景为列表渲染，于vue不同，vue使用的是v-for循环渲染，jsx语法中不支持类似语法，如果要使用循环渲染，可以使用数组的map（）方法，注意：循环渲染列表时，应该对每一项添加对应的key属性，且key属性的值要确保唯一性 const list = [ { id: 1, name: '笑纳' }, { id: 2, name: '你的答案' }, {
关于原生js渲染
m0_62285976的博客
06-30 1628
当我们自己写出来之后是死数据的时候，就需要我们去到后台给出的数据来渲染，当我们拿到的数据是这个样子的 但是我们所需要的是商圈的个数，也就是两个，所以需要shop.length,最后得出的结果也就是2到现在为止，我们已经拿出了我们需要渲染的数据。html代码如下 然后引入jquery 然后就可以直接渲染 okk,这样就好啦...
原生js渲染列表
热门推荐
qq_38026437的博客
09-29 1万+
做了一个简单的原生循环渲染： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
django-jsx:Django的JSX模板渲染器
05-07
Django JavaScript模板引擎 如果要使用多个模板引擎，请使用Django 1.8。 注意如果要使用React，则必须重新启动服务器以进行模板更新，因为模板已缓存在模板服务器上。 重要的是要知道上下文可以在客户端使用，因此将敏感数据放在上下文中是个坏主意。 为什么？ 很少有易于使用的库来呈现DjangoJavaScript服务器端。 目的是创建一种解决方案，该解决方案需要尽可能少的设置并表现良好。 安装 要自动启动服务器，请将django_jsx添加到INSTALLED_APPS 将'django_jsx.template.backend.JsxTemplates'添加到TEMPLATES设置 TEMPLATES = [ ... { 'BACKEND': 'django_jsx.template.backend.JsTemplates',
week7_day2：React列表和键，条件渲染
02-24
week7_day2 React| 状态 React| 清单和键 React| 条件渲染 React| 状态 有状态的组成部分，由阿尔斯塔南省的唐纳德·皮埃尔·丹托·洛斯·达托斯·坎比亚特斯·德尔·莫斯莫·科莫·洛斯·斯塔多斯视觉呈现。 萨尔瓦多埃斯塔ES联合国objeto accedido mediante this.state Ÿactualizado mediante EL方法方法.setState() 现实中的事实发生了变化，新的法律要求了一切。 React| 清单和键 可以在JSX或组件列表中迭代数组数组中的元素。 Cada elemento resulte debe disponer de una propiedad key de valorùnico。 一个través德尔operador德propagación，ES更多钞票投递拉totalidad德尔objeto
jsx-tikzcd：使用JSX渲染tikzcd图
02-03
使用JSX渲染tikzcd图。 目录 介绍 tikzcd是一个功能强大的LaTeX软件包，可以绘制用于数学尤其是类别理论的漂亮图表。 但是，其语法主要基于外观，而不是语义，这使得很难在不重新定义边缘的情况下更改单个节点的...
jsx-to-html:将JSX-IR渲染为HTML字符串
05-03
JSX-IRHTML渲染器安装npm install jsx-to-html 用法转堆babel . transform ( code , { plugins : [ 'jsx-to-html/babel-plugin' ] , blacklist : [ 'react' ]} ) ; 或描述的任何其他方式，只需将“'jsx-to-...
ko-jsx:用于Knockout.js的替代JSX渲染器
05-18
淘汰赛JSX 该库替代了Knockout.js的渲染器。 它用Knockout的数据绑定和DOM遍历交换了预编译的JSX。 使用这些技术可以显着提高性能，从而使Knockout成为某些最快的库的陪伴。 请参阅 。 它通过使用完成此操作。 它将...
react18之01 创建项目 与 基础之 jsx语法(类组件、函数组件定义变量、遍历数组、使用三目、定义事件修改数据、插槽)
weixin_43845137的博客
03-22 897
{/* 02：渲染数组 */}arr - {return (}){/* 03：渲染对象 */}
JSX的条件渲染
m0_63400611的博客
08-21 340
【代码】JSX的条件渲染。
【vue学习】渲染函数&jsx
lanwuying的专栏
07-19 1290
Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数 先贴官网地址：渲染函数&jsx 官网简单案例h1~h6 模板写法 render写法 调用 Vue-render函数 createElement创建虚拟Dom createElement 到底会返回什么呢？其实不是一个实际的 ...
Vue.js 条件渲染全解析
ScottePerk的博客
11-14 351
注意标题是而不是条件判断。Vue给v-if这类条件判断属性取名叫条件渲染。这些属性的目的是判断要不要渲染这些元素，而不仅仅是所谓的判断，是否渲染才是最主要的功能。
jsx条件渲染行内样式
06-03
可以使用三元表达式来进行条件渲染，并在内联样式中使用JavaScript对象的形式设置样式属性。示例代码如下： ```jsx const isRed = true; return ( <div style={{ color: isRed ? 'red' : 'black' }}> This text will be red if isRed is true, otherwise it will be black. </div> ); ``` 在上面的例子中，如果`isRed`是`true`，则文字颜色为红色，否则为黑色。注意，样式属性名采用驼峰式命名法，如`backgroundColor`、`fontSize`等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值