কীভাবে একটি রিএ্যাকটিজেএস অংশে একাধিক ক্লাস যুক্ত করা যায়

346

আমি রিএ্যাকটিজেএস এবং জেএসএক্সে নতুন এবং নীচের কোডটি নিয়ে আমার একটু সমস্যা হচ্ছে।

আমি classNameপ্রতিটি বৈশিষ্ট্যে একাধিক ক্লাস যুক্ত করার চেষ্টা করছি li:

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

আমার প্রতিক্রিয়া উপাদানটি হ'ল:

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"));
javascript  css  reactjs  ecmascript-6 
— হেক্টর
সূত্র
আমি পাওয়া breif উত্তর এখানে stackoverflow.com/a/36209517/4125588 শুধু + অপারেটর সঙ্গে এই ক্লাস, স্ট্যাটিক বা গতিশীল, যোগদান JavaScript ব্যবহার, 'প্রথম এক ব্যতীত শ্রেণীর সামনে সন্নিবেশ করতে' স্মরণ কর, হিসাবে বাস্তব এইচটিএমএলে ক্লাসটি 'আব সি' এর মতো হওয়া উচিত, তাদের মধ্যেও স্থান থাকা উচিত।
— Fadeoc Khaos
— দশদশযাকো
1
কেন classNames={{foo: true, bar: true, baz: false}}এবং classNames={["foo", "bar"]}শুধু কাজ করে না ?
— পিটার ভি।

উত্তর:

221

আমি ক্লাসের নামগুলি ব্যবহার করি যখন ক্লাসগুলি (না) ব্যবহার করার সিদ্ধান্ত নেওয়ার জন্য প্রয়োজনীয় পরিমাণ যুক্তিযুক্ত প্রয়োজন। একটি অতি সাধারণ উদাহরণ :

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

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

এটি বলেছে, আপনি যদি কোনও নির্ভরতা অন্তর্ভুক্ত করতে না চান তবে নীচে আরও ভাল উত্তর রয়েছে।

— নাবিক
সূত্র
189
এটি খুব খারাপ যে আপনাকে কোনও উপাদানে মাত্র দুটি ক্লাস যুক্ত করতে
— শ্রেণিকনামের
4
@ user959690 এটি একটি উদাহরণ। আপনি যখন এই জিনিসগুলি অনেক কিছু করছেন তখন এই লাইব্রেরিটি খুব সুন্দর এবং কখন ক্লাস প্রয়োগ করা প্রয়োজন বা না করা দরকার তা নিয়ে আপনার জটিল যুক্তি রয়েছে। আপনি যদি কিছু সাধারণ করছেন তবে নিশ্চিত হন যে কেবল টেমপ্লেটগুলি ব্যবহার করুন তবে প্রতিটি ক্ষেত্রেই আলাদা এবং পাঠককে তাদের কাজের জন্য সঠিক সরঞ্জামটি বেছে নেওয়া উচিত।
— জ্যাক 17
7
@ user959690 এটি লক্ষণীয় যে ওয়েবপ্যাক ব্যবহার করার সময় এটি এখন এনপিএম দ্বারা ইনস্টল করা আছে , সুতরাং import classNames from 'classnames'কোনও উপাদান ব্যবহার করার জন্য className={classNames(classes.myFirstClass, classes.mySecondClass)} ।
— হুলিগানকাট
5
বাহ্যিক গ্রন্থাগার ব্যবহার করার দরকার নেই, নীচে আমার উত্তরটি দেখুন।
— হিউ ডেভিস 3 ই
1
লাইব্রেরির অন্যান্য সুবিধাগুলি রয়েছে: 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>;
— AmitJS94
395

আমি ES6 টেম্পলেট আক্ষরিক ব্যবহার । উদাহরণ স্বরূপ:

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

এবং তারপরে এটি রেন্ডার করুন:

<input className={classes} />

ওয়ান-লাইন সংস্করণ:

<input className={`form-control round-lg ${this.state.valid ? '' : 'error'}`} />
— দাম্জন পাভলিকা
সূত্র
157
এছাড়াও:<input className={`class1 ${class2}`}>
— কোডি মনিজ
3
@ ইউনিও দয়া করে আপনার মন্তব্যটি উত্তর হিসাবে পোস্ট করুন যাতে আমি এটির উচ্চারণ করতে পারি। এটি এতটা প্রাপ্য। আমি এটির মতো সহজ কিছুর জন্য 1 ঘন্টা সন্ধান করেছি এবং এখন আমি এটি একটি মন্তব্য হিসাবে সমাহিত পেয়েছি। ধন্যবাদ.
— সৌভিক ঘোষ
এর ফলাফল <input class=" form-control input-lg round-lg" />। শুরুতে অতিরিক্ত স্থান নোট করুন। এটি বৈধ তবে কুৎসিত। এমনকি প্রতিক্রিয়া জিজ্ঞাসিত প্রশ্নাগুলি
— নেকডেবল
আপনি কেন ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করে সেট করা যেতে পারে এমন কিছু ক্লাস সেট করতে কোনও গ্রন্থাগার (স্বীকৃত উত্তরের মতো) কেন আমদানি করবেন তা আমি বুঝতে পারি না, যাইহোক, আরও কার্যকর, ক্লিনার এবং পঠনযোগ্য সমাধান।
— মার্কাস পার্সনস
2
এটা সঠিক উত্তর. "সঠিক" উত্তরের পরামর্শ অনুসারে এর জন্য নির্ভরতা ব্যবহার করা ওভারকিল।
— TheDarkIn1978
171

শুধু জাভাস্ক্রিপ্ট ব্যবহার করুন।

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

আপনি যদি কোনও বস্তুতে ক্লাস ভিত্তিক কী এবং মান যুক্ত করতে চান তবে আপনি নিম্নলিখিতটি ব্যবহার করতে পারেন:

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} />

বা এমনকি সহজ:

const isEnabled = true;
const isChecked = false;

<li className={[isEnabled && 'enabled', isChecked && 'checked']
  .filter(e => !!e)
  .join(' ')
} />
// Output:
// <li className={'enabled'} />
— 0xcaff
সূত্র
এখানে আমার জন্য কাজ করা লাইনটি রয়েছে:className={['terra-Table', medOrder.resource.status]}
— ডগ উইলহেম
1
@ ডগ উইলহেলম আমি মনে করি না এটি কার্যকর হয়। এটি স্পষ্টতই স্ট্রিংকে কল করে এবং কমা দ্বারা পৃথক করা ক্লাসগুলির তালিকা তৈরি করে। github.com/facebook/react/issues/3138
— 0xcaff
6
className={[listOfClasses].join(' ')}এটি আমার জন্য কাজ করে ব্যবহার করার জন্য ভাল ধারণা ধন্যবাদ!
— আলা এডডাইন জেবলি
98

CONCAT

অভিনব হওয়ার দরকার নেই আমি সিএসএস মডিউলগুলি ব্যবহার করছি এবং এটি সহজ

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

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

এর ফলস্বরূপ:

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

অন্য কথায়, উভয় শৈলী

Conditionals কে

যদি হয় তবে একই ধারণাটি ব্যবহার করা সহজ হবে

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

<div className={class1 + ' ' + style.style2} />
— জেমি হুটার
সূত্র
1
এটি আমার জন্য '-' নামগুলির সাথে কাজ করেছিল, যেমন: <নাথ শ্রেণিকাম = {স্টাইলস.নবরবার + "" + শৈলী ['নভবার-ডিফল্ট']}>
— ফ্লিঙ্কম্যান
এলওএল, আমি আমার মাথা ফাটিয়ে ফেলি এবং উত্তরটি সহজ কনক্যাট: ডি। বিটিডব্লিউএসএস লোডার মডিউলটির সাথে এই আলসো কাজ করে
— গুডডিকুল
এর সাথে সমস্যাটি হ'ল আপনার alচ্ছিক ক্লাস থাকতে পারে না (যদি অপরিবর্তিত থাকে তবে এটি যুক্ত করা হবে না), তাই এটি নির্ভর করে যে আপনি নিশ্চিত যে আপনার ক্লাসটি নাল নয় (alচ্ছিক নয়)। Alচ্ছিক ক্ষেত্রে ক্লাসের মতো সহায়ক () এর চেয়ে ভাল আর নেই। আমরা সেই className={স্লাইডার {{ClassName এর মতো টেম্পলেটগুলির সাথে একটি টের্নারি ব্যবহার করতে পারি? `$ {ClassName} : ''}}` `` তবে এটি অনেক বেশি। [দ্রষ্টব্য: 'কিছু' + অপরিবর্তিত = 'কিছু আন্ডারফাইন্ড'। জে গতিশীল রূপান্তর
— মোহাম্মদ আল্লাল
নিশ্চিত যে, আপনি কেবল উপরে একটি পরিবর্তনশীল ঘোষণা করতে পারেন এবং এটি শর্তসাপেক্ষে ব্যবহার করতে পারেন :)
— জেমি হাবার
42

এটি ES6 টেম্পলেট আক্ষরিক সাথে অর্জন করা যেতে পারে:

<input className={`class1 ${class2}`}>
— কোডি মনিজ
সূত্র
1
এটি প্রায় আমার জন্য কাজ করেছিল আমাকে ক্লাস 1টিও খুব ফাঁক করে দিতে হয়েছিল এবং কোনও ত্রুটি নেই, তাই দেখে মনে হচ্ছে <input className={`${class1} ${class2}`}>
— কিংস্টন ফরচুন
35

আপনি এই জাতীয় একাধিক শ্রেণীর নামের সাথে একটি উপাদান তৈরি করতে পারেন:

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

স্বাভাবিকভাবেই, আপনি শ্রেণীর নাম যুক্ত স্ট্রিং ব্যবহার করতে পারেন এবং উপাদানটির শ্রেণীর নামগুলি আপডেট করতে এই স্ট্রিংটি ম্যানিপুলেট করতে পারেন।

var myClassNammes = 'class1 class2 class3';
...
<li className={myClassNames}>foo</li>
— nightlyop
সূত্র
1
আপনি এটি পরীক্ষা করেছেন? আমি করলাম :)
— রেভেন
হ্যা, আমি করেছিলাম. আসলে, আমি এটি প্রায়শই ব্যবহার করছি তবে কেবল একটি টাইপো দেখেছি এবং সংশোধন করেছি। প্রথম লাইনে অবশ্যই শ্রেণীর নামগুলিযুক্ত স্ট্রিংটির "পরিবর্তে ব্যবহার করতে হবে '। এর জন্যে দুঃখিত.
— নাইটলাইপ
20

এটি আপনি ES6 এর মাধ্যমে এটি করতে পারেন:

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

আপনি একাধিক শ্রেণি এবং শর্তাদি তালিকাবদ্ধ করতে পারেন এবং স্থির শ্রেণিও অন্তর্ভুক্ত করতে পারেন। এটি একটি অতিরিক্ত গ্রন্থাগার যুক্ত করার প্রয়োজন হয় না।

শুভকামনা;)

— হিস্টো ইফতিমভ
সূত্র
2
সমস্ত অতিরিক্ত সাদা স্থান বিবেচনা করে খুব কুৎসিত এইচটিএমএল এর ফলস্বরূপ।
— নেকিডেবল
2
এটির মতো লেখার দরকার নেই। এটি সমাধানের আরও ভাল ব্যাখ্যা করার জন্য এটি একটি উদাহরণ। এবং সর্বদা উত্পাদনে আপনার সংক্ষিপ্ত সংস্করণ থাকে :)
— Hristo Eftimov
18

ভ্যানিলা জেএস

বাহ্যিক গ্রন্থাগারগুলির প্রয়োজন নেই - কেবল ES6 টেম্পলেট স্ট্রিং ব্যবহার করুন :

<i className={`${styles['foo-bar-baz']} fa fa-user fa-2x`}/>
— হু ডেভিস
সূত্র
ভ্যানিলা জেএস ইএস 6 নয়। তবে আমি আপনার উদাহরণ পছন্দ করি।
— রায়াননার্ড
8
@ রায়াননার্ড আপনি কি বোঝাচ্ছেন যে "ইএস 6 ভ্যানিলা জেএস নয়"? যাইহোক, এটি হ'ল কারণ ভ্যানিলা জেএস মানে কোনও ফ্রেমওয়ার্ক ছাড়াই জাভাস্ক্রিপ্ট। ইএস 6 জাভাস্ক্রিপ্টের একটি নতুন সংস্করণ। - স্ট্যাকওভারফ্লো.com
— হিউ ডেভিস
কোনও ভুল উত্তর নয় তবে অনেক উন্নতি করা যেতে পারে। উদাহরণস্বরূপ, অন্য প্রত্যেকে রাজ্য সম্পর্কে উদাহরণ যুক্ত করেছিল।
— জেগালার্ডো
10

হয়তো classnames আপনি সাহায্য করতে পারেন।

var classNames = require('classnames');
classNames('foo', {'xx-test': true, bar: false}, {'ox-test': false}); // => 'foo xx-test'
— xsong
সূত্র
1
আপনি কি এই উদাহরণটিকে আরও ব্যবহারযোগ্য করে তুলতে পারেন?
— জেগালার্ডো
9

আমি মনে করি না যে কেবলমাত্র একাধিক ক্লাস যুক্ত করার জন্য আমাদের একটি বাহ্যিক প্যাকেজ ব্যবহার করা দরকার।

আমি ব্যক্তিগতভাবে ব্যবহার 

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

অথবা 

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

দ্বিতীয়টি ক্ষেত্রে আপনার শর্তাধীন ক্লাস যুক্ত করা বা অপসারণ করতে হবে।

— পাশাম আখিল কুমার রেড্ডি
সূত্র
1
এটি যেভাবেই কেবল একটি ক্লাস যুক্ত করবে।
— ট্রিকআরট্রিট
6

কেবল যোগ করে, আমরা খালি স্ট্রিংগুলি ফিল্টার করতে পারি।

className={[
    'read-more-box',
    this.props.className,
    this.state.isExpanded ? 'open' : 'close',
].filter(x => !!x).join(' ')}
— হিমাংশু জারিয়াল
সূত্র
6

আপনি এই জাতীয় একাধিক শ্রেণীর নামের সাথে একটি উপাদান তৈরি করতে পারেন, আমি এই উভয়ভাবেই চেষ্টা করেছি, এটি কাজ করছে ...

আপনি যদি কোনও সিএসএস আমদানি করেন তবে আপনি এই উপায়টি অনুসরণ করতে পারেন: ওয়ে 1: 

import React, { Component, PropTypes } from 'react';
import csjs from 'csjs';
import styles from './styles';
import insertCss from 'insert-css';
import classNames from 'classnames';
insertCss(csjs.getCss(styles));
export default class Foo extends Component {
  render() {
    return (
      <div className={[styles.class1, styles.class2].join(' ')}>
        { 'text' }
      </div>
    );
  }
}

উপায় 2: 

import React, { Component, PropTypes } from 'react';
import csjs from 'csjs';
import styles from './styles';
import insertCss from 'insert-css';
import classNames from 'classnames';
insertCss(csjs.getCss(styles));
export default class Foo extends Component {
  render() {
    return (
      <div className={styles.class1 + ' ' + styles.class2}>
        { 'text' }
      </div>
    );
  }
}

**

আপনি যদি অভ্যন্তরীণ হিসাবে সিএসএস প্রয়োগ করেন: 

const myStyle = {
  color: "#fff"
};

// React Element using Jsx
const myReactElement = (
  <h1 style={myStyle} className="myClassName myClassName1">
    Hello World!
  </h1>
);

ReactDOM.render(myReactElement, document.getElementById("app"));
.myClassName {
  background-color: #333;
  padding: 10px;
}
.myClassName1{
  border: 2px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>
<div id="app">
  
</div>
স্নিপেট প্রসারিত করুন

— অরবিন্দ কুমার
সূত্র
6

আপনি নিম্নলিখিত করতে পারেন: 

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

একটি সংক্ষিপ্ত এবং সহজ সমাধান, আশা করি এটি সাহায্য করবে।

— আলবার্তো পেরেজ
সূত্র
5

এটি https://www.npmjs.com/package/clsx দিয়ে করা যেতে পারে :

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

প্রথমে এটি ইনস্টল করুন:

npm install --save clsx

তারপরে এটি আপনার উপাদান ফাইলে আমদানি করুন:

import clsx from  'clsx';

তারপরে আপনার উপাদানটিতে আমদানি করা ফাংশনটি ব্যবহার করুন:

<div className={ clsx(classes.class1, classes.class2)}>
— Yanga থেকে
সূত্র
4

পার্টিতে দেরীতে, তবে কেন এত সাধারণ সমস্যার জন্য তৃতীয় পক্ষ ব্যবহার করবেন?

আপনি @ হু ডেভিস উল্লিখিত হিসাবে এটি করতে পারেন - সবচেয়ে ভাল উপায়

1. <i className={`${styles['foo-bar-baz']} fa fa-user fa-2x`}/>
2. <i className={[styles['foo-bar-baz'], 'fa fa-user', 'fa-2x'].join(' ')}

উভয় ভাল. তবে বড় অ্যাপ্লিকেশনটির জন্য লেখা জটিল হয়ে উঠতে পারে। এটিকে সর্বোত্তম করে তোলার জন্য, আমি উপরের জিনিসগুলি একই জিনিস করি তবে এটি একটি সহায়ক শ্রেণিতে রাখি

আমার নীচের সহায়ক ফাংশনটি ব্যবহার করে, আমাকে ভবিষ্যতের সম্পাদনার জন্য যুক্তি আলাদা রাখতে দেয় এবং ক্লাসগুলি যুক্ত করার একাধিক উপায়ও দেয়

classNames(styles['foo-bar-baz], 'fa fa-user', 'fa-2x')

অথবা

classNames([styles['foo-bar-baz], 'fa fa-user', 'fa-2x'])

এটি নীচে আমার সহায়ক ফাংশন। আমি এটি একটি সহায়ক.জেজে রেখেছি যেখানে আমি আমার সমস্ত সাধারণ পদ্ধতি রাখি। এত সাধারণ কাজ হওয়ায় আমি নিয়ন্ত্রণ রাখতে তৃতীয় পক্ষের ব্যবহার এড়িয়ে চলি avoided

export function classNames (classes) {
    if(classes && classes.constructor === Array) {
        return classes.join(' ')
    } else if(arguments[0] !== undefined) {
        return [...arguments].join(' ')
    }
    return ''
}
— এলটন জৈন
সূত্র
3

আপনি অ্যারে ব্যবহার করতে পারেন এবং তারপরে স্পেস ব্যবহার করে তাদের সাথে যোগ দিতে পারেন।

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

এর ফলস্বরূপ:

<li key={index} class="activeClass data.class main-class"></li>
— বিনয় জারিয়া
সূত্র
3

আমি জানি এটি একটি দেরী উত্তর, তবে আমি আশা করি এটি কারও সাহায্য করবে।

বিবেচনা করুন যে আপনি একটি সিএসএস ফাইল ' প্রাথমিক ', ' ফন্ট-i ', ' ফন্ট-এক্সএল ' -তে নিম্নলিখিত ক্লাসগুলি সংজ্ঞায়িত করেছেন

  • প্রথম পদক্ষেপটি হ'ল সিএসএস ফাইল আমদানি করা।
  • তারপর

<h3 class = {` ${'primary'} ${'font-i'} font-xl`}> HELLO WORLD </h3>
স্নিপেট প্রসারিত করুন

কৌতুক করবে!

আরও তথ্যের জন্য: https://www.youtube.com/watch?v=j5P9FHiBVNo&list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3&index=20

— অচিন্থ Isসুর
সূত্র
2

ফেসবুকের টডো টেক্সট ইনপুট.জেএস উদাহরণ ব্যবহার করে 

render() {
    return (
      <input className={
        classnames({
          edit: this.props.editing,
          'new-todo': this.props.newTodo
        })}
        type="text"
        placeholder={this.props.placeholder}
        autoFocus="true"
        value={this.state.text}
        onBlur={this.handleBlur}
        onChange={this.handleChange}
        onKeyDown={this.handleSubmit} />
    )
  }

প্লেইন ভ্যানিলা জেএস কোডের সাথে ক্লাসের নামগুলি প্রতিস্থাপন করা এ জাতীয় দেখাচ্ছে:

render() {
    return (
      <input
        className={`
          ${this.props.editing ? 'edit' : ''} ${this.props.newTodo ? 'new-todo' : ''}
        `}
        type="text"
        placeholder={this.props.placeholder}
        autoFocus="true"
        value={this.state.text}
        onBlur={this.handleBlur}
        onChange={this.handleChange}
        onKeyDown={this.handleSubmit} />
    )
  }
— ভ্লাদ বেজডেন
সূত্র
2

আপনি যদি অন্য মডিউল আমদানি করতে চান না, তবে এই ফাংশনটি classNamesমডিউলটির মতো কাজ করে ।

function classNames(rules) {
    var classes = ''

    Object.keys(rules).forEach(item => {    
        if (rules[item])
            classes += (classes.length ? ' ' : '') + item
    })

    return classes
}

আপনি এটি এর মতো ব্যবহার করতে পারেন:

render() {
    var classes = classNames({
        'storeInfoDiv': true,  
        'hover': this.state.isHovered == this.props.store.store_id
    })   

    return (
        <SomeComponent style={classes} />
    )
}
— শেঠ
সূত্র
আপনি যদি মানচিত্রের সাহায্যে বা হ্রাস করতে পারেন তবে ক্লোজারগুলি কেন ব্যবহার করবেন? function classNames(rules) { return Object.entries(rules) .reduce( (arr, [cls, flag]) => { if (flag) arr.push(cls); return arr }, [] ).join(" ") }
— Савичев
1

এটা যা আমি করি:

উপাদান:

const Button = ({ className }) => (
  <div className={ className }> </div>
);

কলিং উপাদান:

<Button className = 'hashButton free anotherClass' />
— RegarBoy
সূত্র
1

আমি 16.6.3 এবং @Material UI 3.5.1 ব্যবহার করছি এবং ক্লাসে অ্যারে ব্যবহার করতে সক্ষম হচ্ছি নাম হিসাবে className={[classes.tableCell, classes.capitalize]}

সুতরাং আপনার উদাহরণে, নিম্নলিখিত অনুরূপ হতে পারে।

<li key={index} className={[activeClass, data.class, "main-class"]}></li>
— Devakhim
সূত্র
এটি আমি যা করছিলাম (কোনও এমইউআই হওয়া সত্ত্বেও) এবং কাজ করে না, কেবল প্রথম শ্রেণিতে প্রয়োগ হয় - কোনও সতর্কতা বা অভিযোগ নেই।
— হুয়ান ল্যানাস
1

ব্যবহার Https://www.npmjs.com/package/classnames

ক্লাসের নামগুলি 'শ্রেণীর নাম' থেকে আমদানি করুন;

  1. বিচ্ছিন্ন কোমা ব্যবহার করে একাধিক ক্লাস ব্যবহার করতে পারেন:

    <li className={classNames(classes.tableCellLabel, classes.tableCell)}>Total</li>

  2. শর্তের সাথে বিচ্ছিন্ন কোমা ব্যবহার করে একাধিক ক্লাস ব্যবহার করতে পারেন: 

    <li className={classNames(classes.buttonArea, !nodes.length && classes.buttonAreaHidden)}>Hello World</li>

ক্লাসেরনেমে প্রপস হিসাবে অ্যারে ব্যবহার করাও কাজ করবে তবে সতর্কতা যেমন দেয়

className={[classes.tableCellLabel, classes.tableCell]}
— বিক্রমজিৎ সিং
সূত্র
— জ্যাক বাশফোর্ড
0

আমি আরসি-ক্লাসনেম প্যাকেজ ব্যবহার করি ।

// ES6
import c from 'rc-classnames';

// CommonJS
var c = require('rc-classnames');

<button className={c('button', {
  'button--disabled': isDisabled,
  'button--no-radius': !hasRadius
})} />

আপনি যে কোনও বিন্যাসে (অ্যারে, অবজেক্ট, আর্গুমেন্ট) ক্লাস যুক্ত করতে পারেন। সমান সমান বস্তুগুলিতে অ্যারে বা আর্গুমেন্ট প্লাস কীগুলি থেকে সমস্ত সত্যবাদী মানtrue একত্রে মার্জ ।

উদাহরণ স্বরূপ:

ReactClassNames('a', 'b', 'c') // => "a b c"
ReactClassNames({ 'a': true, 'b': false, c: 'true' }) // => "a c"
ReactClassNames(undefined, null, 'a', 0, 'b') // => "a b"
— morajabi
সূত্র
0

আমি bind classNamesসিএসএস মডিউলটিতে উপাদানটিতে আমদানি করেছি।

import classNames from 'classnames'; 
import * as styles from './[STYLES PATH];
const cx = classNames.bind(styles);

classnames ঘোষণা করার ক্ষমতা দেয় classNameএকটি ঘোষণামূলক উপায়ে একটি প্রতিক্রিয়া উপাদানটির জন্য ।

উদা: 

<div classNames={cx(styles.titleText)}> Lorem </div>

<div classNames={cx('float-left')}> Lorem </div> // global css declared without css modules
<div classNames={cx( (test === 0) ?
             styles.titleText : 
             styles.subTitleText)}>  Lorem </div> // conditionally assign classes

<div classNames={cx(styles.titleText, 'float-left')}> Lorem </div> //combine multiple classes
— রাজেন্দ্র কুমার ভঙ্কাদারী
সূত্র
0

আমি সাধারণত এটি ব্যবহার করি: (আপনার ক্ষেত্রে) 

    <li  key={index} className={
        "component " +
        `${activeClass? activeClass: " not-an-active-class "}` +
        `${data.class? " " + data.class : " no-data-class "}`
   } />

যখন এটি জেএসএক্সের হয় এবং (সাধারণত) আমাদের কিছু জেসন থাকে ... আপনি এটি লুপ করার চেয়েও ... উপাদান । মানচিত্র , এবং কিছু শর্তসাপেক্ষে জেএসএন থেকে সম্পত্তি মানের উপর নির্ভর করে শ্রেণীর নাম সরবরাহ করতে জেসন সম্পত্তি উপস্থিত রয়েছে কিনা তা যাচাই করে নিন some নীচের অংশে_রংকারক এবং উপাদান_ড ار্ক_শ্যাডের উপাদানগুলি উপাদান.ম্যাপ () থেকে পাওয়া যায়

   <div className={
        "component " +
        `${component_color? component_color: " no-color "}` +
        `${component_dark_shade? " " + component_dark_shade : " light "}`
   }/>

আউটপুট: <div class="component no-color light" .... বা: <div class="component blue dark" ....মানচিত্রের মানগুলির উপর নির্ভর করে ...

— StefaDesign
সূত্র
0

যখন আমার অনেকগুলি বিবিধ ক্লাস রয়েছে, আমি নিম্নলিখিতগুলি দরকারী বলে মনে করেছি।

ফিল্টারটি nullমানগুলির কোনও অপসারণ করে এবং যোগদানটি বাকী সমস্ত মানকে একটি স্পেস বিভাজিত স্ট্রিংয়ে রাখে।

const buttonClasses = [
    "Button", 
    disabled ? "disabled" : null,
    active ? "active" : null
].filter((class) => class).join(" ")

<button className={buttonClasses} onClick={onClick} disabled={disabled ? disabled : false}>
— মাইকেল মারফি
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.