首页 > 其他分享 >react的基本:条件渲染

react的基本:条件渲染

时间:2023-04-26 21:22:38浏览次数:33  
标签:loading const 渲染 react 条件 return 加载

import reactDom from "react-dom"


// 条件渲染 if else
let loading = false
// 写一个函数用于加载
const loadData = () => {
    if(loading) {
        return <div>数据加载中</div>
    }else {
        return <div>数据加载完成,此处直接显示数据</div>
    }
}
// 条件渲染 三元运算符
const loadData1 = () => {
     return loading ?  <div>数据加载中</div> : <div>数据加载完成,此处直接显示数据</div>
}

// 条件渲染 逻辑运算符
// 短路原则 loading = true 才会显示内容  
const loadData2 = () => {
    return loading && <div>数据加载中</div> 
}
console.log(loadData2())  // false 
const title = <div>条件渲染: {loadData2()}</div> 

reactDom.render(title,document.querySelector("#root"))

 

标签:loading,const,渲染,react,条件,return,加载
From: https://www.cnblogs.com/zhulongxu/p/17357381.html

相关文章

  • react的基本使用
    //导入react和react-dom包importreactfrom'react'importreactDomfrom'react-dom'//console.log(react)//console.log(reactDom)//创建react元素//参数1.元素2.属性【没有就写null】3.元素子节点//react创建元素并返回consth1=react.crea......
  • 为什么以及什么时候 React 会渲染一个组件
    组件显示到屏幕之前,其必须被React渲染。在您触发渲染后,React会调用您的组件来确定要在屏幕上显示的内容。“渲染中”即React在调用您的组件。在进行初次渲染时,React会调用根组件。对于后续的渲染,React会调用内部状态更新触发了渲染的函数组件。这个过程是递归......
  • react 更新状态中的对象
    State可以保存任何类型的JavaScript值,包括对象。但是你不应该直接改变你在React状态下持有的对象。相反,当你想更新一个对象时,你需要创建一个新对象(或复制一个现有对象),然后设置状态以使用该副本。const[position,setPosition]=useState({x:0,y:0});从技术上讲,可......
  • react18中antd的select选择器组件自定义下拉框的内容
    效果如图导入组件和图标import{Select}from'antd'import{ManOutlined,WomanOutlined}from'@ant-design/icons';const{Option}=Select;数据letuserListOption=[{value:1,label:"小明",avatar:"http://xxx......
  • react点击滑块验证
     css.wrap-num{width:300px;}@keyframesdefaultWave{0%{transform:scale(1);}20%{transform:scale(1.23);}40%{transform:scale(1);}100%{transform:scale(1);}}//旋转@keyframesloadingWave{0%{......
  • 重拾react杂记
     import{param,setParam}from'React'组件的名称必须以大写字母开头 <TableOfContents/>每个js文件只有一个exportdefaultfunctionxx(){}你的标签和return关键字不在同一行,则必须把它包裹在一对括号中, 注意:无论是子组件还是父组件,他们的名字都是大写字母开头,......
  • 实时云渲染赋能数字孪生实训平台,打造智慧教育
    随着数字化时代的到来,数字孪生技术在制造业、医疗、教育等领域中已经得到了广泛的应用。数字孪生技术在教育领域中的应用也越来越受到关注。数字孪生实训是一种利用数字孪生技术进行实践教学的方式,可以让学生更加深入地了解和掌握数字孪生技术在实际生产和生活中的应用。数字孪生......
  • nsga2-带约束条件的多目标优化
    logiccodeclcclearcloseall%%定义自变量范围nvar=5;nobj=2;npop=20;maxit=50;pc=0.8;nc=round(pc*npop/2)*2;mu=0.05;%自变量约束条件varmin=[1030.66];varmax=[132.8211.641];%自变量变化步长step=[10.10.50.051];len=(varmax-varmin).*step;......
  • 音视频八股文(5)--SDL音视频渲染实战。会使用就行,不需要深究。
    01-SDL子系统SDL将功能分成下列数个子系统(subsystem):◼SDL_INIT_TIMER:定时器◼SDL_INIT_AUDIO:音频◼SDL_INIT_VIDEO:视频◼SDL_INIT_JOYSTICK:摇杆◼SDL_INIT_HAPTIC:触摸屏◼SDL_INIT_GAMECONTROLLER:游戏控制器◼SDL_INIT_EVENTS:事件◼SDL_INIT_EVERYTHING:包含上述所......
  • 音视频八股文(5)--SDL音视频渲染实战。会使用就行,不需要深究。
    01-SDL子系统SDL将功能分成下列数个子系统(subsystem):◼SDL_INIT_TIMER:定时器◼SDL_INIT_AUDIO:音频◼SDL_INIT_VIDEO:视频◼SDL_INIT_JOYSTICK:摇杆◼SDL_INIT_HAPTIC:触摸屏◼SDL_INIT_GAMECONTROLLER:游戏控制器◼SDL_INIT_EVENTS:事件◼SDL_INIT_EVERYTHING:包含上述......