爲什麼以及如何在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實用程序？

回答

相關問題