如何在反应中将类名添加到变量内的元素？

Question

我想动态地向元素添加一些 classes。我知道如何使用 html-dom 以及如何将 javascript 表达式传递给 className。但这些都不是我想做的。我想知道是否有一种方法可以像 push 那样将 class 添加到数组或将其连接到该组件对象中的字符串。

这是我正在寻找的伪代码：

const el = <div className='one' />;
// Notice that I'm not using useRef hook.
el.classList.push('two');

// OR:
el.className += ' two';

Answer 1

您应该尝试使用不同的类设置一个数组变量，您可以在其中有条件地推送您需要的类并在您的 jsx 中拆分数组。

像这样：

const classNames = ['one']
classNames.push('two');

const el = <div className={classNames.split(' ')} />;

您的元素不是您拥有 classList 属性的节点元素，您可以添加和删除类。它是一个 JSX 元素。即使它在其结构中重新组合了一个 html 元素。

Answer 2

通常，您将通过在创建 JSX 元素之前计算 class 名称来执行此操作：

let className = "one";
className += " two";
const el = <div className={className} />

如果那不可能（比如说，你从 parent 收到这个元素作为道具，所以它有一个 class 名称“one”已经融入），那么你会需要使用 cloneElement:

import { cloneElement } from 'react';

const el = <div className='one' />;
const newElement = cloneElement(el, { className: el.props.className + " two "});

如何在反应中将类名添加到变量内的元素？

How to add a className to an element inside a variable in react?

javascript

frontend

web

reactjs