代码之家 › 专栏 › 技术社区 › Leff

如何将类推送到组件

reactjs javascript

Leff · 技术社区 · 6 年前

我使用的组件TextAreaField有一些默认类。我想知道如何才能推送或添加一个新的类到该组件。

     <TextAreaField
          name="summary"
          label={{ id: 'Form.Summary' }}
          maxLength={200}
          rows={1}
          readOnly={readOnly}
        />

如果我添加属性 className 这样地:

      <TextAreaField
          name="summary"
          label={{ id: 'Form.Summary' }}
          maxLength={200}
          rows={1}
          readOnly={readOnly}
          className="new-class"
        />

然后我覆盖现有的默认类,我只想添加一个新的,我怎么做呢?

4 回复 | 直到 6 年前

Jatin Gupta 6 年前

您可以像这样维护数组中的类:

let classes = ["class1", "class2"...];

然后可以使用push/pop等标准数组方法添加/删除类。将它们作为一个数组进行维护可以更容易地有条件地管理类。

您可以将最后的类传递给您的组件,方法是使用如下空格连接所有类:

<TextAreaField
          name="summary"
          label={{ id: 'Form.Summary' }}
          maxLength={200}
          rows={1}
          readOnly={readOnly}
          className={classes.join(" ")}
/>

Lars Munkholm 6 年前

而不是 className 使用其他属性名,如 classNames 或 classes

gazdagergo 6 年前

使用 classnames 库,用于处理类联接:

import React from 'react';
import classnames from 'classnames';

export default TextAreaField = ({ className }) => (
  <Textarea className={ classnames('myDefaultClassName', className) } />
)