REACT JavaScript如何使用自定义类名？
React JavaScript中可以使用自定义类名的方式有多种，以下是其中几种常见的方法：
- 使用字符串拼接： 可以使用字符串拼接的方式将自定义类名与其他类名一起添加到元素上。例如，假设有一个自定义类名为"custom-class"，可以通过以下方式使用：
<div className={"custom-class " + otherClassName}></div>其中，otherClassName是其他类名。
- 使用模板字符串： 可以使用ES6的模板字符串语法来拼接类名。例如：
<div className={`custom-class ${otherClassName}`}></div>同样，otherClassName是其他类名。
- 使用数组： 可以使用数组的方式将多个类名组合在一起。例如：
<div className={['custom-class', otherClassName].join(' ')}></div>其中，otherClassName是其他类名。
- 使用classnames库： classnames是一个常用的第三方库，可以更方便地处理类名的拼接。首先需要安装classnames库：
npm install classnames然后在代码中引入并使用classnames库：
import classNames from 'classnames';
<div className={classNames('custom-class', otherClassName)}></div>其中，otherClassName是其他类名。
以上是React JavaScript中使用自定义类名的几种常见方法。根据具体的需求和项目情况，选择合适的方式来添加自定义类名。
相关·内容
4回答
同时拥有JSX和普通className
javascript、html、css、xml、reactjs
我有一个css样式类，它需要是JSX形式的，因为它取决于状态，但我也需要使用样式类的普通方式。如何将这些组合在一起？我试过了 <span className={statusColor} className="uppercase"> 它只考虑最后一个类 <span className={statusColor uppercase}> 显然，它会查找一个名为uppercase的变量并输出错误 <span className="uppercase {statusColor}"> 他们两个都不工作 下面是我的代码的简化版本。做这件事
浏览 37提问于2016-08-28得票数 0
回答已采纳
6回答
为什么以及如何在React组件中使用类名实用程序？
javascript、reactjs、npm
请简单地向我解释一下，在React代码中使用实用程序的目的是什么？我刚刚读过Classname文档，但我仍然无法理解在代码中使用它的主要原因是什么：
import classnames from 'classnames';
[...]
render() {
const { className } = this.props
return (
<div className={classnames('search', className)}>
<div className="search-bar-wrapper&
浏览 9提问于2017-10-17得票数 6
1回答
使用css-loader内联Webpack + React
css、reactjs、webpack、react-jsx
我正在使用Webpack和css-loader构建我的React应用程序，并使用模块。我爱死它了。不过，我的大多数样式表都非常小，我希望将它们内联到与我的标记和JavaScript相同的JSX文件中。
我现在使用的CSS加载器看起来像这样：
{ test: /\.(css)$/i,
loader: ExtractTextPlugin.extract("style-loader", "css-loader?modules") }
在我的JSX中，我像这样import我的单独的CSS文件：
import classNames from 'dashboa
浏览 3提问于2015-09-25得票数 7
1回答
考虑到边界元，使用“类名”进行可伸缩的CSS反应
javascript、css、reactjs、sass、jsx
所以，这里的新手.首先，我将说我有一个简单的单页应用程序，它由几个简单的页面组成。
使用反应路由器，我有一个‘自上而下’为我的组件设置。为了让您对我的SPA结构有一个基本的了解，请参阅下面：
index -- layout(react routers) --
|--About Page
|--Home Page
|--Contact Page
我正在从我的主页组件呈现一个名为"GlobalHero
浏览 2提问于2017-02-23得票数 0
回答已采纳
2回答
不变违规:反应错误#130
node.js、reactjs
因此，我目前正在尝试为站点中的自定义侧栏呈现代码：。但我发现了错误：
元素类型无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但got:未定义。检查TheSidebar的呈现方法
我不明白这是怎么回事，但我还是第一次做出反应。在Node上运行。任何帮助都是非常感谢的。以下是代码：
const React = require('react');
const ReactDOM = require('react-dom');
const { IndexLink, Link } = require('react-router');
浏览 0提问于2017-09-14得票数 0
回答已采纳
1回答
导致这个未知错误的错误在哪里:无法找到模块“./user/UserSection.jsx”消息？
javascript、reactjs
在浏览器的cosole中，我得到了以下错误：
Uncaught Error: Cannot find module "./users/UserSection.jsx"
然而，我已经查看了我的UserSection文件和目录中的任何语法或错误，并且我无法确定为什么它找不到模块。
下面是UserSection.jsx组件：
import React, {Component} from 'react';
import UserForm from './UserForm.jsx';
import UserList from './UserList
浏览 4提问于2016-11-24得票数 0
回答已采纳
2回答
模糊反应classNames在现有代码库中的应用
reactjs、sass、jsx
Hi guys
我正在使用现有的代码库(100+组件)开发一个大型的React应用程序。目前，我们正在使用传统的样式方法，例如：
JSX:
<div className="div" />
SCSS:
.div {
/* ... */
}
我们用webpack做这些装载机：
/* ... */
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
浏览 0提问于2020-04-07得票数 2
2回答
条件逻辑jsx反应
javascript、reactjs、ecmascript-6、jsx
我试图在我的jsx视图中向className应用超过一个条件。但是它不让我。
它只听第一个条件。
className={usernameFocus ? "toggled" : "" || usernameValidated ? "validated" : ""}
我尝试过几种组合：
className={usernameFocus ? "toggled" : "" + usernameValidated ? "validated" : ""}
如何完成多个条件以将cl
浏览 11提问于2016-10-12得票数 2
回答已采纳
1回答
使用边界元对className和css模块正确的参数列表语法
javascript、reactjs、jsx、css-modules
我使用的是React和一个非常简单的CSS模块设置与webpack。也使用BEM作为类名。
带破折号的类名只有在字符串形式下才是有效的，而且我还没有找到不为每个类条目重复引用css import语句的字符串版本。
这两种方法都不理想，我希望避免使用库。
<div className={classNames({[styles.foo]: true, [styles.bar]: true})}>
<div className={[styles.foo, styles.bar].join(' ')}>
这些都不起作用
className={styles[
浏览 15提问于2018-01-01得票数 0
回答已采纳
3回答
React className命名约定
reactjs、naming-conventions
正如我们所知，在原始html中，我们应该使用小写和短划线作为css类名称(例如<div class="lower-case-dash" />)。那么在React JSX中呢？
对于html元素和其他React组件，css类名的命名约定是什么？camelcase还是dash？
<div className="divClass">Something</div>
<div className="DivClass">Something</div>
<div className="d
浏览 1提问于2019-07-26得票数 18
回答已采纳
25回答
如何在一个ReactJS组件中添加多个类？
javascript、css、reactjs、ecmascript-6
我是ReactJS和JSX的新手，我对下面的代码有一点小问题。
我尝试将多个类添加到每个li的className属性中
<li key={index} className={activeClass, data.class, "main-class"}></li>
我的React组件是：
var AccountMainMenu = React.createClass({
getInitialState: function() {
return { focused: 0 };
},
clicked: function(index) {
浏览 125提问于2015-12-30得票数 522
回答已采纳
1回答
className作为一个函数及其在TypeScript中的应用
reactjs、typescript
我遇到了那些代码行，我不知道类名是一个反应库。它可以作为一种功能意味着什么？有人能帮我穿过去吗？
import cn from "classnames";
interface Props {
className?: string;
children?: any;
el?: HTMLElement;
clean?: boolean;
}
const Container: React.FC<Props> = ({
children,
className,
el = "div",
cle
浏览 2提问于2022-07-26得票数 0
1回答
Webpack，巴别塔和react:从生产构建中删除某些类名
reactjs、webpack、babeljs
在我的项目中，我使用了一种以'u-‘开头的特殊类型的标题栏，例如’u- classNames _bar‘，用于单元测试。我想将它们从生产构建中删除，有没有工具可以做到这一点？
// MyComponent.jsx
// u-my_comp is just for unit testing. my_comp is for styling
const MyComponent = () => <div className="u-my_comp my_comp">My Component</div>
// MyComponent.test.jsx
浏览 0提问于2018-12-07得票数 1
1回答
无法切换React.js中按钮的类
javascript、html、css、reactjs、css-transitions
我想使用类切换为button制作运动动画，就像在中一样。由于某些原因，我的代码失败了:它调用单击处理程序，但不影响类。
这是代码(我使用React，类名和Webpack)：
index.jsx：
import React from "react";
import styles from "./index.css";
import classnames from "classnames";
export default class PlaylistButton extends React.Component {
onClick() {
浏览 3提问于2016-10-29得票数 1
回答已采纳
2回答
如何在不删除其他类的情况下在React中添加条件类？
jquery、reactjs、conditional
我希望根据状态对象的真实性，有条件地向元素添加一个类名，同时在初始呈现时维护通过插件应用的类。
不起作用的示例：
import React from 'react';
import classnames from 'classnames';
export default class CoolThing extends React.Component{
constructor(props) {
super(props);
}
componentDidMount() {
// This plugin sets classes to t
浏览 1提问于2016-11-15得票数 1
1回答
在使用className和Tailwind活动时呈现特定的classNames
javascript、css、tailwind-css、classname
我正在使用顺风、CSS、和classNames包。
我正在呈现两个div，我想检查其中一个是否有am active类，然后为它设置一个特定的背景颜色className bg-[#000]。
我试过使用'bg-[#000]': 'active'检查，但这只是在所有元素上插入背景色。
如何使用Tailwind和classNames将特定的样式设置为活动元素
谢谢!
Screenshots:
这是标签的屏幕截图，第一个是当前活动的。但是第二个不活动的类也有bg-[#000]类。
代码：
list.map((page, index) => {
ret
浏览 6提问于2022-07-01得票数 1
回答已采纳
4回答
如何在ES6中将Jsx内部呈现函数分离为单独的文件？或任何其他的解决方案，以反应分开的逻辑和表示？
javascript、ecmascript-6、reactjs
以下是ES5中的代码，其中jsx被写入一个单独的文件中
import React from 'react';
import Template from './template.jsx';
const DetailElement = React.createClass({
render: Template
});
export default DetailElement;
enter code here
template.jsx文件将如下所示
import React from 'react';
const render = functi
浏览 6提问于2016-11-15得票数 4
回答已采纳
1回答
如何创建嵌套的react组件？
javascript、reactjs、typescript
我有一个下拉组件。其中将有两个道具。
触发器(这将触发下拉列表)
列表(下拉列表内容)
这是我的组成部分：
import { useLayer } from "react-laag";
import { ReactElement, useState } from "react";
import classNames from 'classnames';
interface Props {
trigger?: string | ReactElement
children?: ReactElement | Array
浏览 8提问于2021-12-20得票数 1
回答已采纳
2回答
当用户滚动时在ReactJS组件上添加/删除类
javascript、reactjs
我想更改导航栏上的一个类，这样当用户滚动它时，它就会从透明变为不透明。根据这里的一些其他问题和其他在线解决方案，我提出了以下几个问题，并对其进行了一些调整，但似乎都不起作用。 我在控制台日志中添加了错误检查，但它从未运行过。 页面组件 import React from 'react'
import Nav from './_includes/Nav.jsx'
import VideoBanner from './_includes/VideoBanner.jsx'
import Section from './_includes/Se
浏览 20提问于2019-02-20得票数 0
1回答
我可以在PostCss样式中使用react组件属性吗？
css、reactjs、postcss
我正在调查第三方对PostCss组件的反应
在其中我看到了从外部接收到的属性isOpen
import React, { Component } from 'react';
import classNames from 'classnames/bind';
import PropTypes from 'prop-types';
import styles from './Modal.css';
class Modal extends Component {
render() {
const {
isOpe
浏览 1提问于2021-02-25得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
