react如何根据变量渲染组件

  1. 三元运算符
  2. useMemo

第一种方法的缺点:其他变量更改时,会再次进入三元运算符,例子如下:

bash 复制代码
//这里有一个父组件:Father
{
n==0
?
<Father><div>{111}</div></Father>
:
<div>{111}</div>
}

第二种方法如图

其中Fade是一个函数式组件,是一个动画组件,链接:react-reveal/Fade

想要的效果:当第一次进入页面的时候,需要Fade包裹,达到动画效果,改变其他变量时候不需要动画效果。

问题:

  1. 为什么要把n设置成外部变量,因为放在TaskCard组件中,其他变量会影响到组件重新渲染,因此放到外部。
  2. 为什么n不等于0的时候,需要返回({children})=><div>{children}</div>;如果不这样写,那么ItemCard这个组件怎么放到Container这个组件中
  3. Fade本身就是一个函数组件,其中已经接收了外部传入的children,所以不需要像2那样返回
相关推荐
雾恋4 小时前
最近一年的感悟
前端·javascript·程序员
A黄俊辉A4 小时前
axios+ts封装
开发语言·前端·javascript
小李小李不讲道理5 小时前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js
连合机器人5 小时前
晨曦中的守望者:当科技为景区赋予温度
java·前端·科技
郑板桥305 小时前
tua-body-scroll-lock踩坑记录
前端·javascript
慢半拍iii7 小时前
JAVA Web —— A / 网页开发基础
前端
gnip7 小时前
pnpm 的 monorepo架构多包管理
前端·javascript
新手村领路人8 小时前
Firefox自定义备忘
前端·firefox
乖女子@@@8 小时前
css3新增-网格Grid布局
前端·css·css3
伐尘9 小时前
【CE】图形化CE游戏教程通关手册
前端·chrome·游戏·逆向