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那样返回
相关推荐
独立开阀者_FwtCoder2 分钟前
前端自适应方案全面解析:打造多端适配的现代网页
前端·javascript·面试
万事胜意50713 分钟前
前端切换Tab数据缓存实践
前端
渣渣宇a13 分钟前
Three_3D_Map 中国多个省份的组合边界绘制,填充背景
前端·javascript·three.js
Anger重名了16 分钟前
🌟新手也能秒懂!协程如何让APP更丝滑?
前端
点正16 分钟前
ResizeObserver 和nextTick 的用途
前端
zayyo18 分钟前
Web 应用轻量化实战
前端·javascript·面试
kovli22 分钟前
红宝书第十七讲:通俗详解JavaScript的Promise与链式调用
前端·javascript
lilye6623 分钟前
精益数据分析(19/126):走出数据误区,拥抱创业愿景
前端·人工智能·数据分析
李是啥也不会28 分钟前
Vue中Axios实战指南:高效网络请求的艺术
前端·javascript·vue.js
xiaoliang33 分钟前
《DNS优化真经》
前端