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那样返回
相关推荐
小周同学@36 分钟前
谈谈对this的理解
开发语言·前端·javascript
Wiktok40 分钟前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~44 分钟前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号1 小时前
【大前端】前端生成二维码
前端·二维码
程序员码歌1 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康2 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海2 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏3 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码3 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby3 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js