react 动态组件-条件渲染

一、动态组件与条件渲染

1.相关知识点

(1)、什么是动态组件？

动态组件就是根据数据的变化而切换不同的组件，从而展示不同的内容

(2)、什么场景下使用动态组件？

1. 当发现点击不同的 tab 页，切换不同的内容信息(标签结构) 时，就可以使用动态组件
2. 当发现点击不同的 tab 页，切换相同的内容信息(标签结构)时，公用一个组件即可

(3)、动态style和class

根据数据的变化动态的修改style的样式，或者董涛的修改类名，从而实现样式的动态的变化

原生js： div.style.color=’ ‘; div.classlist.add(’ on ');

(4)、条件渲染的三种方式

1. 逻辑与 && 运算实现

   {this.comName === "login" && <Login />}
   {this.comName === "regist" && <Regist />}
   

2. 三目运算实现

   {this.comName === "login" ? <Login /> : <Regist />}
   

3. if 语句实现

        
        //这些代码写在return 的上面
        let curCom;
        if (this.comName === "login") {
            curCom = <Login />;
          } else {
            curCom = <Regist />;
          }
          
      //这些代码写在要渲染组件的地方
       {curCom}

(5)、动态style的两种方式

1. 方式一：style中直接设置对象，写CSS样式，这种写法等价于html中行内样式的做法，适合少量样式编写，最终会渲染为行内样式

    <p style={{ color: color, fontSize: fontSize   "px" }}>段落</p>
   

2. 方式二： style属性中设置函数调用，函数内部返回样式对象，本质上和方式一 一样，都是设置行内样式，将央视对象单独封装起来

    getPStyle = () => {
             const { color, fontSize } = this.state;
             return {
               color: color,
               fontSize: fontSize   "px",
               backgroundColor: "yellow",
               width: fontSize * 10   "px",
             };
           };
   

   <p style={this.getPStyle()}>这是第二种方法的段落</p>
   

   【注】： 在事件 getPStyle() 加上小括号，可以不等点击，直接就执行

这篇好文章是转载于：学新通技术网