react 中使用多个className

已于 2022-03-02 13:36:10 修改
阅读量1.1w 收藏 7
点赞数 8
分类专栏： React 文章标签： react
于 2021-08-25 17:19:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/EsquireY/article/details/119915216
版权

在使用react写项目的时间，遇到多个className的需求（一个是全局样式，一个是三目运算控制的）

第一种

多种公共样式

<div className='className_first className_second'></div>

第二种

多种公共样式 && 引入的样式

<div className= ` className_first className_second ${styles.btnPeacetime}`></div>

第三种

多种公共样式 && 逻辑运算显示样式名

<div className={`pointer ${benType ? styles.activeBtn : `${styles.btnPeacetime}`}`}></div>
EsquireY
关注
  • 8
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React使用className多类名设置
weixin_45576305的博客
11-09 2609
React使用css module和className多类名设置 最近在写react的时候碰到了一个小问题：现在css样式我通过下图这样的方式直接引进来的时候，发现会和其他组件里面相同className的会有冲突的现象。正常来说吧，是可以通过不同的组件在className前面加上不同组件的标识做区分的，但是这样感觉不舒服。写习惯了vue的，发现vue里面是可以加scoped将样式私有化，那react应该也会有类似的解决方案吧。 正常引入 然后找了下发现有个叫做css module的。下图里框着的这刚好就是
React中Fragment的使用
Celester_best的博客
03-28 1463
React中布局代码中return只能返回有一个元素，如果返回多个并列元素时就会报错： 解决办法就是在并列元素外层包裹一层父元素，如下所示： export default class Demo extends React.Component { constructor(props) { super(props) this.dataList = [ { name: 'Javascript', desc: 'Javascript...
react classname多个_你不知道的 React 最佳实践
weixin_39603327的博客
11-20 266
React ⚛️React 是一个用于开发用户界面的 JavaScript 库， 是由 Facebook 在 2013 年创建的。 React 集成了许多令人兴奋的组件、库和框架[1]。 当然，开发人员也可以自己开发组件。图片在最佳实践之前，我建议在开发 React 应用程序时使用测试驱动开发(TDD)[2]。 测试驱动开发意味着首先编写一个测试，然后根据测试开发你的代码，这样更容易识别...
merge-props:合并React元素的className，样式和事件处理程序道具
05-16
合并道具 通过以下规则合并React className ， style和事件处理程序（ onClick ， onFocus ， on{LiterallyEveryEvent} ）： className道具是串联的 style道具浅层合并，之后的值优先 函数从左到右依次运行。 安装 npm install merge-props 用法示例 const props = mergeProps ( { onClick : fn1 } , { onClick : fn2 , className : 'blue' } , { onClick : fn3 , className : 'button' , styles : { display : 'block' } } , { styles : { display : 'flex' , color : 'red' } } ) ;
【React】探讨className的正确使用方式
最新发布
lph159的博客
08-03 1084
通过本文的讨论，我们深入探讨了React中className属性的正确用法和常见错误。理解这些基础概念和错误原因，不仅有助于编写高质量的React代码，还能提高开发效率和用户体验。静态和动态类名的用法：了解如何在JSX中正确使用静态和动态类名。常见错误及其解决方法：识别并修复因错误使用单引号而导致的样式问题。开发中的最佳实践：通过调试、测试和代码审查，确保代码的正确性和可维护性。
React 入门儿
凹凸实验室
11-26 663
作者： 凹凸曼-风魔小次郎 谁都没有看见过风，更不用说你和我了。但是当纸币在飘的时候，我们知道那是风在数钱。 React 影响着我们工作的方方面面，我们每天都在使用它，只窥其表却难以窥其里。正所谓看不如写，本篇文章的目的就是从原理层面探究 React 是如何工作的。 工具 在写文章之前，为了方便理解，我准备了一个懒人调试仓库 simple_react ，这个仓库将 benchmark 用例（只有两个 ^ ^）和 React 源码共同放在 src 文件夹中，通过 snowpack 进行热更新，可以直接在.
React 设置多个className
热门推荐
qq_35605231的博客
12-12 2万+
在一个元素上设置样式，有一个固定的样式，然后还有一个使用三元运算符根据条件添加的样式。 比如说有一个固定样式"title": &lt;div className="title"&gt;标题&lt;/div&gt;， 然后还要一个点击高亮的样式: &lt;div className={index === this.state.active ? "active" : null}&gt;标题&amp
【React】classnames 库（可添加多个 className 类名）
qq_45677671的博客
11-21 2598
react 项目 中 classnames 库使用方法（可添加多个 className 类名）
React中使用UEditor百度富文本的方法
12-10
总的来说，虽然在React中使用UEditor需要处理一些额外的兼容性问题，但通过合理的封装和配置，仍然可以顺利集成并实现丰富的富文本编辑功能。在实践中，不断调试和优化，就能确保UEditor在React项目中稳定工作。
react-手把手教你在react中使用Swiper4做轮播图
08-15
使用npm或yarn来安装Swiper4及其CSS文件，这样可以引入到你的React项目中。 ``` npm install swiper@^4 --save 或 yarn add swiper@^4 ``` 同时，别忘了安装其样式文件： ``` npm install swiper@^4/dist/...
react-multiple-scrolls:用于一起滚动多个可滚动内容
05-15
在React开发中，有时我们需要实现一个功能，使得多个可滚动区域可以同步滚动，这在诸如数据对比、长表格等场景中十分常见。"react-multiple-scrolls" 是一个专门解决此类问题的JavaScript库，它允许你创建并管理一组...
react设置多个classname
xinxin_csdn的博客
09-23 755
方法一：ES6模板 className = {`title ${index === this.state.active ? ‘active’ :’’}`} 方法二：join(‘ ’) className = {[‘title’, index === this.state.active?’active’:null].join(‘ ’)} 方法三： 引入classnames库，安装： 1 npm install classnames --save
React-classnames库的使用方法
小妖精来啦的博客
11-06 5175
最近开始接触react框架，发现react跟vue、angular有很大的不同，其中之一就是原生动态添加多个className会报错： import styles from './style.css' &lt;div className={styles.class1 styles.class2}&lt;/div&gt; 以上方法会报错，解决方法为： 引入安装classnames库： ...
react classname多个_React 全家桶
weixin_39860201的博客
11-21 389
此全家桶用到的库有：redux, react-redux, immutable.js, redux-actions, redux-saga,react-router，此外用的是 ES6 语法，给公司后端同学看的一个简单入门和对项目技术栈的了解ReactReact 是一个专注 view 层的（UI层）的 JavaScript 库，它比传统的操作 DOM 的 JavaScript 库性能高很多，并且...
添加多个className
qq_34108428的博客
07-20 402
react 添加多个className
react组件中设置多个className
是草莓味的啊
12-25 1583
react组件中设置多个className
React-classnames库（添加多个 className）
qq_24917475的博客
10-23 1655
作用：添加多个 className 使用的例子： 外层index <FooterToolbar className={styles.footerToolbar} style={{ width }}> <Button type="primary" onClick={this.submit} loading={loading}> 提交 </Button&g...
React中给Dom节点添加多个className
weixin_55815873的博客
05-14 211
方法2（中间必须用空格隔开）
react classname
07-27
在React中，你可以使用`className`属性来添加CSS类名到元素。以下是一个示例： ```jsx import React from 'react'; function MyComponent() { return ( <div className="my-classname"> Hello, World! </div> ); } export default MyComponent; ``` 在上面的例子中，`className`属性被用于将CSS类名`my-classname`添加到`<div>`元素上。你可以根据需要添加多个类名，用空格分隔它们。例如：`className="class1 class2"`。 这样，你就可以通过CSS样式表来定义`my-classname`类的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值