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

您能否以一种简单的方式向我解释，在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)回答，但我仍然无法理解代码段。

最佳答案

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

关于javascript - 为什么以及如何在React组件中使用classnames实用程序？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46792826/