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

您能简单地向我解释一下使用的目的是什么吗类名 https://github.com/JedWatson/classnamesReact 代码中的实用程序？我刚刚阅读了 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/ https://jsfiddle.net/John_Taylor/j8d42m2f/2/

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

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

我也读过（如何使用 React.js 的类名库 https://stackoverflow.com/questions/32343167/how-to-use-classnames-library-for-react-js）答案，但我还是有理解上的问题my code片段。

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