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

您能否以简单的方式向我解释在React代码中使用Classnames实用程序的目的是什么？我刚读类名的文档，但我还不能掌握什么是使用它的代码，像这样的主要原因：为什么以及如何在React组件中使用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）的答案，但我仍然有了解我的代码问题片段。

来源

2017-10-17 John Taylor

如果使用在脚本中使用它的方式类名只是简单地连接您用空格给出的字符串。

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

来源

2017-10-17 14:45:08 kioopi

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

来源

2017-10-17 14:59:34 vs1682

我想你应该尝试阅读文档一个更多的时间，他们很清楚。具体而言，这一部分：

所以，在这里你可以有下面的代码生成一个类名道具了在阵营：

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是真的。

来源

2017-10-17 15:00:41 Lansana

就你而言，<div className={classnames('search', className)}>相当于<div className={`search ${className}`}>。

classnames当你必须处理条件类时主要是有用的。

来源

2017-10-17 15:04:53 Olivier

您的代码段

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

等同于：

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

所以在这种特殊情况下，它只是封装三元操作从模板字符串内。虽然这很小，但却有所提高 - 难以产生bug。

也许这是使用classnames的最简单情况，但是当您的类名操作周围会有越来越多的条件时，它会变得越来越有用

来源

2017-10-17 15:05:38 Vlad

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

回答

相关问题