文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

关于React动态修改元素样式的三种方式

2022-11-13 14:10

关注

React动态修改元素样式

React动态修改元素样式常用的方式有两种:借助ref和通过动态控制状态的变化修改元素的样式

1.借助ref动态修改样式

在需要修改样式的元素上添加ref

<div className='scroll-title clear-fix' ref={ this.manage }>

在constructor中添加React.createRef()

this.manage = React.createRef()

在逻辑代码中使用

this.manage.current.style.display = 'block'

如果代码中识别不出this的话需要通过let that = this 改变this的指向

that.manage.current.style.display = 'block'

2.通过动态控制状态的变化修改元素的样式(两种方式)

方式一

逻辑代码中设置一个标志位display默认为true,通过对应的条件改变display的值为true或者false,进而将对应的样式名赋值给DOM的className属性,样式写在对应的style当中

例如:

 constructor() {
        super()
        this.state = {
            display: true
        }
    }   
    componentDidMount() {
        window.onscroll = function(event) {
                if (divTop < -12) {
                     that.setState({
                         display: false
                     })
                    that.manage.current.style.display = 'block'
                } else {
                     that.setState({
                         display: true
                     })
                }
        }
    }
<div className={this.state.display ? 'none' : 'scroll-title }>

方式二

方式二和方式一实现的原理是一样的,逻辑代码中设置一个标志位display默认为true,通过对应的条件改变display的值为true或者false,进而将对应的样式名赋值给DOM的className属性,样式写在对应的style当中,不同之处在于逻辑代码的判断不是在DOM中,而是在js中判断的,如下:

3.通过在DOM中使用JS代码(三元运算符)

实现不同DOM的展示与隐藏转换

方式三并不是严格意义上的改变样式,只是用来改变显示与隐藏及展示对应的组件的

小结一下:

React样式冲突问题

在react脚手架中已经有了sass的配置,因此只需要安装sass的依赖包,就可以直接使用sass了

安装sass依赖包

npm i sass -D 

- 把index.css改成index.scss

- 导入index.scss文件

注意:如果使用了scss,scss中使用图片的绝对路径的时候需要加上~ 

background-image: url(~assets/login.png); 

css-样式私有化

css modules-基本使用

步骤

1.改样式文件名。从 xx.scss -> xx.module.scss (React脚手架中的约定,与普通 CSS 作区分)

2.引入使用。

import styles from './index.module.scss'
<div className={styles.css类名}></div>

css类名是index.module.scss中定义的类名。

示例

定义样式 index.module.css 

.root {font-size: 100px;}

使用样式

import styles from './index.module.css'
<div className={styles.root}>div的内容</div>

原理

CSS Modules 通过自动给 CSS 类名补足类名,保证类名的唯一性,从而避免样式冲突的问题  

css module的注意点 

类名最好使用驼峰命名,因为最终类名会生成styles的一个属性

cssModules-维持类名 

格式

在xxx.module.scss中,如果希望维持类名,可以使用格式:

:global(.类名)


:global(.a) {   }
 

.aa :golbal(.a) { }

覆盖第三方组件的样式

:global(.ant-btn) {
  color: red !important;
}

css modules-最佳实践

- 每个组件的根节点使用 CSSModules 形式的类名( 根元素的类名: root )

- 其他所有的子节点,都使用普通的 CSS 类名 :global

index.module.scss中

// index.module.scss
.root {
  display: 'block';
  position: 'absolute';
  // 此处,使用 global 包裹其他子节点的类名。此时,这些类名就不会被处理,在 JSX 中使用时,就可以用字符串形式的类名
  // 如果不加 :global ,所有类名就必须添加 styles.title 才可以
  :global {
    .title {
      .text {
      }
      span {
      }
    }
    .login-form { ... }
  }
}

组件使用

import styles from './index.module.scss'
const 组件 = () => {
  return (
    {}
      <div className={styles.root}>
      {}
        <h1 className="title">
          <span className="text">登录</span>  
          <span>登录</span>  
      </h1>
            <form className="login-form"></form>
    </div>
  )
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯