為什么以及如何在 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”類應用於按鈕。 我希望這有助於回答您的問題