详解react的两种动态改变css样式的方法

2024-04-15 13:42:22

第一种：动态添加class，以点击按钮让文字显示隐藏为demo

import React, { Component, Fragment } from 'react';
import './style.css';
class Demo extends Component{
    constructor(props) {
        super(props);
        this.state = {
            display: true
        }
        this.handleshow = this.handleshow.bind(this)
        this.handlehide = this.handlehide.bind(this)
    }
    render() {
        return (
            <Fragment>
                {/*动态添加一个class来改变样式*/}
                <p className={this.state.display?"active":"active1"}>你是我的唯一</p>
                <button onClick={this.handlehide}>点击隐藏</button>
                <button onClick={this.handleshow}>点击显示</button>
            </Fragment>
        )
    }
    handleshow() {
        this.setState({
            display:true
        })
    }
    handlehide() {
        this.setState({
            display:false
        })
    }
}
export default Demo;

css代码：

 .active{
      display: block;
  }
  .active1{
    display: none;
  }

第二种：动态添加一个style，以点击按钮让文字显示隐藏为demo

import React, { Component, Fragment } from 'react';
class Demo extends Component{
    constructor(props) {
        super(props);
        this.state = {
            display2: true
        }
        this.handleshow2 = this.handleshow2.bind(this)
        this.handlehide2 = this.handlehide2.bind(this)
    }
    render() {
        const display2 = {
            display:this.state.display2 ? 'block' : 'none'
        }
        return (
            <Fragment>
                 {/*动态添加一个style来改变样式*/}
                 <p style={display2}>你是我的唯一</p>
                <button onClick={this.handlehide2}>点击隐藏2</button>
                <button onClick={this.handleshow2}>点击显示2</button>
            </Fragment>
        )
    }
    handleshow2() {
        this.setState({
            display2:true
        })
    }
    handlehide2() {
        this.setState({
            display2:false
        })
    }
}
export default Demo;

总结：用class来改变css样式，可以写多个动态改变的css属性，看起不杂乱，而用style写的话，如果写多个css属性就会看起复杂。都是个人观点，不足请指出

到此这篇关于详解react的两种动态改变css样式的方法的文章就介绍到这了,更多相关react动态改变css样式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

在create-react-app中使用css modules的示例代码

前言如果我们从零开始用webpack + es6来结合react开发前端应用,那势必会在各种webpack配置中消耗大量精力,于是便有了各种脚手架,create-react-app就是其中之一. 对于css modules,在react中,通常用它来避免预料之外样式规则相互覆盖以及实现其他功能. 配置弹出配置文件如果直接使用create-react-app搭建一个项目,所有的配置文件都被隐藏了,整个目录就先这样所以,第一步是将所有的配置文件弹出,在根目录运行以下代码 npm run eje
在Create React App中使用CSS Modules的方法示例

前提条件请先进行全局安装 create-react-app 插件哈,安装命令:npm install create-react-app -g 先使用 create-react-app 命令下载一个脚手架工程,安装命令: # 使用 npx $ npx create-react-app my-app # 使用 npm $ npm init npx create-react-app my-app # 使用 yarn $ yarn create react-app my-app 运行项目 $ cd m
React使用emotion写css代码

简介: emotion是一个JavaScript库,使用emotion可以用写js的方式写css代码.在react中安装emotion后,可以很方便进行css的封装,复用.使用emotion后,浏览器渲染出来的标签是会加上一个css开头的标识.如下:截图中以css-开头的几个标签,就是使用emotion库后渲染出来的. 下面就从安装到使用,介绍下emotion在工程中的应用. emotion的安装: yarn add @emotion/react yarn add @emotion/styled
详解使用create-react-app添加css modules、sasss和antd

create-react-app 是facebook的官方脚手架,对于个人开发者和中小型公司快速创建项目非常推荐.react的CSS解决方案有很多,这里我技术选型时用 css modules 和 sass ,然后配合antd使用通用组件库.但是create-react-app原生并不支持 css modules 和 sass ,所以需要额外配置. 配置增加css modules和sass 使用eject暴露配置 create-react-app 默认是没有暴露 webpack 配置的,所以需要
基于react项目打包css引用路径错误解决方案

没有去修改create-react-app默认的配置文件执行npm start 一切正常, 但是 npm run build 之后生成的打包文件只能在根目录访问这样放在服务器目录就访问不到了报错为手动更改index.html的路径之后又报静态资源引入错误报错解决方案解决: 在package.json下面增加"homepage": ".". 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.
如何用react优雅的书写CSS

1.内联样式优点:这种方式较为简单,一目了然,给标签添加style属性. 缺点: 这种方式可以造成项目结构较为臃肿,造成css命名冲突. import React, { Component } from 'react' import PropTypes from 'prop-types' export default class index extends Component { static propTypes = { title: PropTypes.string } render() {
react中使用css的7中方式(最全总结)

第一种: 在组件中直接使用style 不需要组件从外部引入css文件,直接在组件中书写. import React, { Component } from "react"; const div1 = { width: "300px", margin: "30px auto", backgroundColor: "#44014C", //驼峰法 minHeight: "200px", boxSizing: &
ReactJs设置css样式的方法

前段时间看了React Native,但是感觉在安卓反面的开发并不成熟.有较多功能有待完善,而且自己在实际运用的过程中在一些模块上遇到了不晓得阻力,又苦于网上没有找到那么多资源.于是打算先放一段时间,还是回过头来看ReactJs吧. React颠覆了html的传统思维,代码基本都写在<script type="text/babel"></script>标签里面.我开发的时候采用的是IDEA,当然也可以使用atom或者webstor.使用IDEA时,需要在set
react使用CSS实现react动画功能示例

本文实例讲述了react使用CSS实现react动画功能.分享给大家供大家参考,具体如下: react动画: import React, { Component } from 'react'; class Boss extends Component { constructor(props) { super(props); this.state = { isShow:true } this.toTogger=this.toTogger.bind(this) } render() { return
详解react的两种动态改变css样式的方法

第一种:动态添加class,以点击按钮让文字显示隐藏为demo import React, { Component, Fragment } from 'react'; import './style.css'; class Demo extends Component{ constructor(props) { super(props); this.state = { display: true } this.handleshow = this.handleshow.bind(this) thi
jquery实现动态改变css样式的方法分析

本文实例讲述了jquery实现动态改变css样式的方法.分享给大家供大家参考,具体如下: jquery 几乎成了现在开发WEB应用的标准JS库,这与其简单性和易用性是分不开的.作为一个后端开发人员,要做一些前端页面时,CSS 样式的控制是少不了需要掌握的.如果是静态的CSS,当然是可以直接写上去的,但有些界面是需要一些动态效果的,比如颜色变化,字体大小变化,甚至DIV 的隐藏于现实等,这些都需要用javascript 动态控制其CSS样式,下面就常用的jquery 控制 css 样式的方法做一个
详解Java中两种分页遍历的使用姿势

在日常开发中,分页遍历迭代的场景可以说非常普遍了,比如扫表,每次捞100条数据,然后遍历这100条数据,依次执行某个业务逻辑:这100条执行完毕之后,再加载下一百条数据,直到扫描完毕那么要实现上面这种分页迭代遍历的场景,我们可以怎么做呢本文将介绍两种使用姿势常规的使用方法借助Iterator的使用姿势 1. 数据查询模拟首先mock一个分页获取数据的逻辑,直接随机生成数据,并且控制最多返回三页 public static int cnt = 0; private static List
用JS动态设置CSS样式常见方法小结(推荐)

用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值无效如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100);
JavaScript改变CSS样式的方法汇总

JavaScript允许你即时的改变CSS样式,这样就可以将用户的眼球吸引到你想他们关注的地方上,并且提供较好的交互体验给力 . JavaScript修改CSS有4种方法: 修改节点style(内联样式): 改变节点class或id: 写入新的css: 替换页面中的样式表. 个人不建议使用后两种方法,几乎所有的功能都可以通过前两种方式实现,并且代码更加清晰.易理解. 后面还会说说如何获取元素的真实样式和一个表单中的注意事项. 1.修改节点style(内联样式) 这种方法权重是最高的,直接写在节点
vuejs实现标签选项卡动态更改css样式的方法

html <ul class="header-list"> <li v-cloak v-for="(item,index) in headerList" v-on:click="selectMainTheme(index)"><a href="java:;" rel="external nofollow" :class="{'active':idx == index}
详解Spring的两种代理方式：JDK动态代理和CGLIB动态代理

代理模式代理模式的英文叫做Proxy或Surrogate,中文都可译为"代理",所谓代理,就是一个人或者一个机构代表另一个人或者另一个机构采取行动.在一些情况下,一个客户不想或者不能够直接引用一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用 A. 抽象主题角色声明了真实主题和代理主题的共同接口,这样一来在任何可以使用真实主题的地方都可以是使用代理主题 B. 代理主题(Proxy)角色: 代理主题角色内部含有对真实主题的引用,从而可以在任何时候操作真实主题对象:代理主题角
详解Android的两种事件处理机制

UI编程通常都会伴随事件处理,Android也不例外,它提供了两种方式的事件处理:基于回调的事件处理和基于监听器的事件处理. 对于基于监听器的事件处理而言,主要就是为Android界面组件绑定特定的事件监听器:对于基于回调的事件处理而言,主要做法是重写Android组件特定的回调函数,Android大部分界面组件都提供了事件响应的回调函数,我们主要重写它们就行. 一基于监听器的事件处理相比于基于回调的事件处理,这是更具"面向对象"性质的事件处理方式.在监听器模型中,主要涉及三类对象
详解SpringMVC的两种实现方式

目录一.方法一:实现Controller接口二.方法二:使用注解开发一.方法一:实现Controller接口这个在我的第一个SpringMVC程序中已经学习过了,在此不作赘述,现在主要来学习第二种方法,使用注解开发: 二.方法二:使用注解开发 1.导包 2.在web.xml中配置DispatcherServlet 3.建立一个Spring配置文件springmvc-servlet.xml <?xml version="1.0" encoding="UTF-8&q
详解React 的几种条件渲染以及选择

对于一个展示页面来讲, 通常有好几种展示状态(以列表页为例): 数据为空, 空页面取数据时发生错误, 错误页面数据正常加载状态针对以上三种情况, react渲染列表的时候要正确判断并渲染出相应的视图, 也就是条件渲染. 不同于vue的v-if, v-show等框架提供的api, react的条件渲染都是js原生的再加上一点点的hack. 比如react文档提到的. if/else, && 和三目等等. 当然上面的都是常用的一些方法, 但是也存在着各种问题, 比如条件分支过多的的事时

详解react的两种动态改变css样式的方法

第一种：动态添加class，以点击按钮让文字显示隐藏为demo

第二种：动态添加一个style，以点击按钮让文字显示隐藏为demo

相关推荐

随机推荐