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)}>

我也读过（ how to use classnames library for React.js）回答，但我仍然无法理解我的代码代码段。

Answer 1

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

假设你有两个类，其中一个每次都会被使用，但第二个类会根据某些条件被使用。因此，如果没有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

如果您在脚本中使用它的方式 classnames ，只需将您为其提供的字符串与空格连接即可。

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

Answer 4

我认为你应该再次尝试阅读文档，它们非常清楚。具体来说，这部分：

因此，您可以使用以下代码为React中的a生成className prop：

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>;
  }
});

很清楚那里发生了什么。如果对象中的值为true，则该键将附加到该类。因此，在该示例中，最终的类将为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”类应用于按钮。我希望这能帮助您回答问题

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

6 个答案: