react如何根据变量渲染组件

news/2024/7/24 9:07:09 标签: react.js, 前端
  1. 三元运算符
  2. useMemo

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

//这里有一个父组件: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那样返回

http://www.niftyadmin.cn/n/5046527.html

相关文章

公众号迁移多久可以完成?

公众号账号迁移的作用是什么&#xff1f;只能变更主体吗&#xff1f;长期以来&#xff0c;由于部分公众号在注册时&#xff0c;主体不准确的历史原因&#xff0c;或者公众号主体发生合并、分立或业务调整等现实状况&#xff0c;在公众号登记主体不能对应实际运营人的情况下&…

数据结构—堆(C语言实现)

目录 堆是什么&#xff1f; 一、大堆 一、小堆 如何实现堆&#xff1f; 代码实现 &#xff1f; 一、定义堆的结构体 二、初始化堆 三、构建堆 1.利用向下调整算法 2.开始构建 四、插入元素 1.利用向上调整算法 五、取出堆顶元素、销毁堆 六、堆排序 Extra&#…

博士期间可读的工具书目(含英文原版网盘资源)

最近从豆瓣和小红书等平台搜罗了一些博士工具书&#xff0c;包括人文社科类的研究方法指南&#xff0c;也有英文写作&#xff0c;或者是学术生存指南&#xff0c;适用于各个学科&#xff0c;硕士也可以阅读。很多小书都适合闲来无事翻阅几页&#xff0c;书籍资源散落在各个平台…

华为云云耀云服务器L实例评测|零基础基于宝塔部署项目

前言&#xff1a;在这个数字化快速发展的时代&#xff0c;数据已经成为企业最为宝贵的资产之一。如何保护和管理这些数据&#xff0c;同时实现灵活、高效地运用&#xff0c;已经成为企业必须面对的重要问题。而云服务正是解决这一问题的最佳选择。云服务适用于各种规模的企业&a…

FlinkException

org.apache.flink.util.FlinkException:Could not stop with a savepoint job 问题描述 ------------------------------------------------------------The program finished with the following exception:org.apache.flink.util.FlinkException: Could not stop with a s…

MySQL学习笔记10

MySQL字符串类型&#xff1a; CHAR类型&#xff1a; CHAR类型的字符串为定长.长度范围是0到255之间的任何值.占用定长的存储空间,不足的部分用空格填充&#xff1b;读取时删掉后面的空格。 例子&#xff1a; password char(32) mobile char(11) name char(10) 存储空间&a…

快速搭建 Linux 软件 repository 的镜像站

repository 镜像站用来干什么&#xff1f; GNU/Linux是一种基于网络协作的 release 套件&#xff0c;在其上部署软件是推荐使用在线包管理工具完成软体部署的。通过搭建repository镜像站&#xff0c;可以解决在离线环境下借助Linux包管理工具部署软件的问题。 搭建repository使…

摄影后期图像编辑工具Lightroom Classic 2023 mac中文版特点介绍

Lightroom Classic 2023 mac是一款图像处理软件&#xff0c;是数字摄影后期制作的重要工具之一&#xff0c;适合数字摄影后期制作、摄影师、设计师等专业人士使用。 Lightroom Classic 2023 mac软件特点 高效的图像管理&#xff1a;Lightroom Classic提供了强大的图像管理功能…