为什么以及如何在 React 组件中使用类名实用程序？

Question

您能否以简单的方式向我解释在 React 代码中使用Classnames实用程序的目的是什么？ 我刚刚阅读了 Classnames 文档，但我仍然无法理解在代码中使用它的主要原因是什么：

import classnames from 'classnames';
[...]
render() {
  const { className } = this.props

  return (
    <div className={classnames('search', className)}>
      <div className="search-bar-wrapper">
        <form className="search-form" onSubmit={this.onSearch.bind(this)}>
          <div className="search-bar">
            <label className="screen-reader-only" htmlFor="header-search-form">Search</label> [...]

此代码的完整版本（jsx）： https ://jsfiddle.net/John_Taylor/j8d42m2f/2/

我不明白这行代码发生了什么：

<div className={classnames('search', className)}>

我也读过那个（ 如何为 React.js 使用类名库）的答案，但我在理解我的代码片段方面仍然有问题。

Answer 1

classnames库允许您以更简单的方式根据不同条件加入不同的classes 。

假设您有 2 个类，其中一个每次都会使用，但第二个类会根据某些条件使用。 所以如果没有classnames库，你会像这样

render() {
  const classnames = 'firstClass';

  if (someCondition) {
    classnames += ' secondClass'
  }

  return(
   <input className={classnames} .. />
  );
}

但是使用classnames库，你会这样做

render() {
  const classnames = {'firstClass', {'secondClass': someCondition}}
  return(
   <input className={classnames} .. />
  );
}

Answer 2

在您的情况下， <div className={classnames('search', className)}>等效于<div className={`search ${className}`}> 。

classnames主要在您必须处理条件类时有用。

Answer 3

如果使用您在脚本类名中使用它的方式，只需将您提供的字符串与空格连接起来。

const className = 'x';
const result = classnames('search', className);
// result == 'search x'

Answer 4

我认为您应该再读一遍文档，它们非常清楚。 具体来说，这部分：

因此，您可能有以下代码为 React 中的 a 生成 className 道具：

var Button = React.createClass({
  // ...
  render () {
    var btnClass = 'btn';
    if (this.state.isPressed) btnClass += ' btn-pressed';
    else if (this.state.isHovered) btnClass += ' btn-over';
    return <button className={btnClass}>{this.props.label}</button>;
  }
});

您可以将条件类更简单地表示为一个对象：

var classNames = require('classnames');

var Button = React.createClass({
  // ...
  render () {
    var btnClass = classNames({
      btn: true,
      'btn-pressed': this.state.isPressed,
      'btn-over': !this.state.isPressed && this.state.isHovered
    });
    return <button className={btnClass}>{this.props.label}</button>;
  }
});

这里库的唯一目的是消除编写丑陋代码来动态添加类的需要，而只需使用一致的语法。

另一个例子：

var Button = React.createClass({
  render () {
    return <button className={this.props.foo ? 'bar' : 'baz' + this.props.bar ? 'baz' : 'foo'}>{this.props.label}</button>;
  }
});

这真的很难读。 那里有很多看起来与此类似的代码。

这是一个更好的方法，使用类名：

var classes = classNames({
    bar: this.props.foo,
    baz: !this.props.foo,
    active: this.props.bar,
    hover: !this.props.bar
});

var Button = React.createClass({
  render () {
    return <button className={classes}>{this.props.label}</button>;
  }
});

很清楚那里发生了什么。 如果对象中的值为真，则键将附加到类中。 所以在那个例子中，最终的类将是bar active ，因为this.props.foo是真实的，而this.props.bar是真实的。

Answer 5

你的代码片段

<div className={classnames('search', className)}>

相当于：

<div className={`search ${className ? className : ""}`}>

所以在这种特殊情况下，它只是从模板字符串内部封装了三元运算符。 这是小但改进 - 更难产生错误。

可能是使用classnames最简单的情况，但是当您在类名操作周围有越来越多的条件时，它会越来越有用

Answer 6

类名可以很容易地应用类名来有条件地反应组件。

例如：让我们创建一个状态，并在按钮被点击时将一个类应用到按钮组件上

const [isActive, setActive] = setState(false);
   import classnames from "classnames"
   var buttonClasses = classnames({
               "btn": true,
                "btn__active": isActive;
              )}
<button className={buttonClasses} onClick={() => setActive(!isActive)}>Make me active</button>

此代码将在单击按钮时将“isActive”类应用于按钮。 我希望这有助于回答您的问题