javascript - ReactJS Bileşenine birden fazla sınıf nasıl eklenir?

Ben ReactJS ve JSX'e yeniyim ve aşağıdaki kodla ilgili küçük bir sorunum var.

Her li öğesindeki className özniteliğine birden fazla sınıf eklemeye çalışıyorum:

<li key={index} className={activeClass, data.class, "main-class"}></li>

React bileşenim şunlardır:

var AccountMainMenu = React.createClass({
  getInitialState: function() {
    return { focused: 0 };
  },

  clicked: function(index) {
    this.setState({ focused: index });
  },

  render: function() {
    var self = this;
    var accountMenuData = [
      {
        name: "My Account",
        icon: "icon-account"
      },
      {
        name: "Messages",
        icon: "icon-message"
      },
      {
        name: "Settings",
        icon: "icon-settings"
      }
    /*{
        name:"Help &amp; Support &nbsp; <span class='font-awesome icon-support'></span>(888) 664.6261",
        listClass:"no-mobile last help-support last"
      }*/
    ];

    return (
      <div className="acc-header-wrapper clearfix">
        <ul className="acc-btns-container">
          {accountMenuData.map(function(data, index) {
            var activeClass = "";

            if (self.state.focused == index) {
              activeClass = "active";
            }

            return (
              <li
                key={index}
                className={activeClass}
                onClick={self.clicked.bind(self, index)}
              >
                <a href="#" className={data.icon}>
                  {data.name}
                </a>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
});

ReactDOM.render(<AccountMainMenu />, document.getElementById("app-container"));

Cevap #1

Ben ES6 şablon dizelerini kullanıyorum. Örneğin:

const error = this.state.valid ? '' : 'error'
const classes = `form-control round-lg ${error}`

Ve sonra onu sadece render edin:

<input className={classes} />

Tek satırlık versiyon:

<input className={`form-control round-lg ${this.state.valid ? '' : 'error'}`} />

Cevap #2

Sınıfları kullanıp kullanmamaya karar vermek için oldukça fazla mantık gerektiğinde classnames kullanırım. Çok basit bir örnek:

...
    var liClasses = classNames({
      'main-class': true,
      'activeClass': self.state.focused === index
    });

    return (<li className={liClasses}>{data.name}</li>);
...

Bunu söyledikten sonra, eğer bir bağımlılık eklemek istemiyorsanız, aşağıda daha iyi cevaplar var.

Cevap #3

Sadece JavaScript kullan.

<li className={[activeClass, data.klass, "main-class"].join(' ')} />

Bir nesnedeki anahtarlar ve değerlere dayalı sınıflar eklemek istiyorsanız, şunları kullanabilirsiniz:

function classNames(classes) {
  return Object.entries(classes)
    .filter(([key, value]) => value)
    .map(([key, value]) => key)
    .join(' ');
}

const classes = {
  'maybeClass': true,
  'otherClass': true,
  'probablyNotClass': false,
};

const myClassNames = classNames(classes);
// Output: "maybeClass otherClass"

<li className={myClassNames} />

Veya daha basit:

const isEnabled = true;
const isChecked = false;

<li className={[isEnabled && 'enabled', isChecked && 'checked']
  .filter(e => !!e)
  .join(' ')
} />
// Output:
// <li className={'enabled'} />

Cevap #4

Birleştir

Gösterişli olmaya gerek yok, ben CSS modüllerini kullanıyorum ve bu kolay

import style from '/css/style.css';

<div className={style.style1+ ' ' + style.style2} />

Bu şu sonucu doğuracaktır:

<div class="src-client-css-pages-style1-selectionItem src-client-css-pages-style2">

Başka bir deyişle, her iki stil

Koşul Cümleleri

Aynı fikri if'lerle kullanmak kolay olurdu

const class1 = doIHaveSomething ? style.style1 : 'backupClass';

<div className={class1 + ' ' + style.style2} />

ES6

Son bir yıldır şablon literallerini kullanıyorum, bu yüzden bahsetmeye değer olduğunu düşünüyorum, onları çok ifade edici ve okunması kolay buluyorum:

`${class1} anotherClass ${class1}`

Cevap #5

Bu, ES6 şablon literalleri ile gerçekleştirilebilir:

<input className={`base-input-class ${class1} ${class2}`}>

(anlaşılır olması için düzenlendi)

Cevap #6

Bir öğeyi birden fazla sınıf adıyla şöyle oluşturabilirsiniz:

<li className="class1 class2 class3">foo</li>

Doğal olarak, sınıf adlarını içeren bir dize kullanabilir ve bu dizeyi öğenin sınıf adlarını güncellemek için işleyebilirsiniz.

var myClassNammes = 'class1 class2 class3';
...
<li className={myClassNames}>foo</li>

Cevap #7

Genellikle insanlar sever

<div className={  `head ${style.class1} ${Style.class2}`  }><div>

VEYA

<div className={  'head ' + style.class1 + ' ' + Style.class2 }><div>

VEYA

<div className={  ['head', style.class1 , Style.class2].join(' ')  }><div>

Ama bu işi yapmak için bir fonksiyon oluşturmayı seçebilirsiniz

function joinAll(...classes) {
  return classes.join(" ")
}

sonra şöyle çağır:

<div className={joinAll('head', style.class1 , style.class2)}><div>

Cevap #8

Bunu ES6 ile şöyle yapabilirsiniz:

className = {`
      text-right
      ${itemId === activeItemId ? 'active' : ''}
      ${anotherProperty === true ? 'class1' : 'class2'}
`}

Birden fazla sınıf ve koşulu listeleyebilir ve ayrıca statik sınıfları da dahil edebilirsiniz. Ek bir kütüphane eklemeniz gerekli değildir.

İyi şanslar ;)

Cevap #9

Vanilya JS

Harici kütüphanelere gerek yok - sadece ES6 şablon dizelerini kullanın:

<i className={`${styles['foo-bar-baz']} fa fa-user fa-2x`}/>

Cevap #10

Sadece birden fazla sınıf eklemek için harici bir paket kullanmamız gerektiğini sanmıyorum.

Ben şahsen kullanıyorum

<li className={`li active`}>Stacy</li>

veya

<li className={`li ${this.state.isActive ? 'active' : ''}`}>Stacy<li>

veya

<li className={'li ' + (this.state.isActive ? 'active' : '') }>Stacy<li>

İkincisi ve üçüncüsü, sınıfları koşullu olarak eklemeniz veya kaldırmanız gerekirse.

Cevap #11

CSS Modüllerini (veya Sass Modüllerini) kullanarak stilinizi belirli bir bileşene de izole edebilirsiniz.

"Bileşen kapsamlı CSS, minimal yan etkiyle geleneksel, taşınabilir CSS yazmanıza olanak tanır: Seçici adı çakışmaları veya diğer bileşenlerin stillerini etkileme endişeleri artık yok."

import * as styles from "./whatever.module.css"  // css version
import * as styles from "./whatever.module.scss" // sass version

<div className={`${styles.class1} ${styles.class2}`}>
   INSERT YOUR CODE HERE
</div>

Ref1 Ref2

Cevap #12

Belki classnames sana yardımcı olabilir.

var classNames = require('classnames');
classNames('foo', {'xx-test': true, bar: false}, {'ox-test': false}); // => 'foo xx-test'

Cevap #13

Bu, https://www.npmjs.com/package/clsx ile yapılabilir :

https://www.npmjs.com/package/clsx

Öncelikle onu kurun:

npm install --save clsx

Sonra bunu bileşen dosyanıza aktarın:

import clsx from  'clsx';

Sonra içe aktarılan fonksiyonu bileşeninizde kullanın:

<div className={ clsx(classes.class1, classes.class2)}>

Cevap #14

Aşağıdakileri yapabilirsiniz:

<li key={index} className={`${activeClass} ${data.class} main-class`}></li>

Kısa ve basit bir çözüm, umarım yardımcı olur.

İlgili makaleler