ReactJS ম্যানুয়াল শ্রেণীর নামগুলিতে গতিশীল ক্লাস যুক্ত করে

Question

আমাকে নিয়মিত ক্লাসগুলির তালিকায় একটি গতিশীল ক্লাস যুক্ত করতে হবে, তবে কীভাবে (আমি বাবেলটি ব্যবহার করছি), এরকম কিছু সম্পর্কে কোনও ধারণা নেই:

<div className="wrapper searchDiv {this.state.something}">
...
</div>

কোন ধারনা?

Comments

প্রতিক্রিয়া স্টাইলিং সেরা অনুশীলন জন্য দরকারী উত্তর লিঙ্কে

— রাহিল আহমেদ

Answer 1

আপনি হয় এটি করতে পারেন, সাধারণ জাভাস্ক্রিপ্ট:

className={'wrapper searchDiv ' + this.state.something}

বা ব্যাকটিক্স সহ স্ট্রিং টেম্পলেট সংস্করণ:

className={`wrapper searchDiv ${this.state.something}`}

উভয় প্রকার অবশ্যই অবশ্যই জাভাস্ক্রিপ্ট, তবে প্রথম প্যাটার্নটি হ'ল প্রথাগত ধরণের।

যাইহোক, জেএসএক্সে, কোঁকড়ানো বন্ধনীগুলিতে আবদ্ধ যে কোনও কিছুই জাভাস্ক্রিপ্ট হিসাবে কার্যকর করা হয়, তাই আপনি সেখানে যা চান তা মূলত আপনি করতে পারেন। তবে জেএসএক্স স্ট্রিং এবং কোঁকড়ানো বন্ধনীগুলিকে একত্রিত করা গুণাবলীর জন্য অনর্থক ।

Comments

এবং একাধিক ক্লাস ক্ষেত্রে?

— পরদীপ জৈন

একাধিক গতিশীল শ্রেণীর ক্ষেত্রে, সমস্ত গতিশীল শ্রেণি অবশ্যই রাজ্য থেকে আসবে, অর্থাত্ এটি ব্যবহার করা সম্ভব নয় element.classList.add("my-class"); সুতরাং এর জন্য অনুমতি className={`wrapper searchDiv ${this.state.something ? "my-class " : ""} ${this.state.somethingElse ? "my-other-class " : ""}`}

— দিচ্ছে

className={'wrapper searchDiv} + this.state.isTrue ? 'my-class' : ' 'এটি কাজ করে না। কেউ বলতে পারেন কেন?

— kryptokinght

Answer 2

কত গতিশীল শ্রেণীর আপনি আপনার প্রকল্প হিসেবে এটি সম্ভবত চেক আউট মূল্য বৃদ্ধি যোগ করতে হবে তার উপর নির্ভর classnames GitHub থেকে JedWatson দ্বারা ইউটিলিটি। এটি আপনাকে একটি শর্ত হিসাবে আপনার শর্তাধীন শ্রেণিবিন্যাসকে উপস্থাপন করার অনুমতি দেয় এবং সত্য যা মূল্যায়ন করে তাদের ফিরিয়ে দেয়।

সুতরাং এর প্রতিক্রিয়া নথি থেকে একটি উদাহরণ হিসাবে:

render () {

var btnClass = classNames({
  'btn': true,
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
});

return <button className={btnClass}>I'm a button!</button>;

} 

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

Comments

এ জাতীয় সাধারণ জিনিসের জন্য শ্রেণিকনামগুলির ব্যবহার ওভারকিল। এটি ব্যবহার করা এড়িয়ে চলুন এবং ড্যানিওজোলির সহজ উত্তরটির জন্য বেছে নিন

— চেকলিস্ট

আপনি কি নিশ্চিত যে এটি একটি সাধারণ জিনিস? আপনি সর্বদা ক্লাসের উপাদানগুলিতে কি প্রয়োগ করা হয় তার উপর সূক্ষ্ম দানাদার পূর্ণ নিয়ন্ত্রণ রাখতে চান।

— ড্রাগাস

@ চেকলিস্ট আমি অন্যথায় তর্ক করব, ক্লাসনেম প্যাকেজটি জিজিপিংয়ের আগে 1.1kB (এবং জিজিপিংয়ের পরে অর্ধ কেবি) রয়েছে, এর কোনও নির্ভরতা নেই, এবং শ্রেণি নাম ম্যানিপুলেশনের জন্য একটি অনেক ক্লিনার এপিআই সরবরাহ করে। এপিআই যখন আরও বেশি অভিব্যক্তিযুক্ত হয়, অকালকালীন এত ছোট কিছু অনুকূল করার দরকার নেই। স্ট্যান্ডার্ড স্ট্রিং ম্যানিপুলেশন ব্যবহার করার সময় আপনাকে প্রতিটি শর্তসাপেক্ষ শ্রেণীর নামের আগে বা প্রতিটি মানক শ্রেণীর নামের পরে ফাঁকির জন্য অ্যাকাউন্ট করতে হবে।

— টমহুজস

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

— MiFiHiBye

Answer 3

একটি সহজ সম্ভাব্য বাক্য গঠন হবে:

<div className={`wrapper searchDiv ${this.state.something}`}>

Answer 4

ডায়নামিক শ্রেণিকামের জন্য এখানে সেরা বিকল্পটি রয়েছে, জাভাস্ক্রিপ্টে যেমন করা হয় তেমন কিছু যুক্তিযুক্ত কাজ করুন।

     className={
        "badge " +
        (this.state.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }

Comments

কোনও প্রলম্বিত সমস্যা ছাড়াই এটি সেরা সমাধান। কবজির মতো কাজ করেছেন। ধন্যবাদ.

— রয়েল.ও

Answer 5

আপনার যদি স্টাইলের নামগুলির প্রয়োজন হয় যা রাষ্ট্রের শর্ত অনুযায়ী প্রকাশিত হয় তবে আমি এই নির্মাণটি ব্যবহার করতে পছন্দ করি:

<div className={'wrapper searchDiv' + (this.state.something === "a" ? " anotherClass" : "")'}>

Answer 6

হুক ব্যবহার করে এটি ব্যবহার করে দেখুন:

        const [dynamicClasses, setDynamicClasses] = React.useState([
    "dynamicClass1", "dynamicClass2
]);

এবং এটি ক্লাসনেম এট্রিবিউটে যুক্ত করুন:

<div className=`wrapper searchDiv ${[...dynamicClasses]}`>
...
</div>

ক্লাস যুক্ত করতে:

    const addClass = newClass => {
       setDynamicClasses([...dynamicClasses, newClass])
    }

ক্লাস মুছতে:

        const deleteClass= classToDelete => {

           setDynamicClasses(dynamicClasses.filter(class = > {
             class !== classToDelete
           }));

        }

Answer 7

আপনি এই এনপিএম প্যাকেজটি ব্যবহার করতে পারেন । এটি সমস্ত কিছু পরিচালনা করে এবং ভেরিয়েবল বা ফাংশনের উপর ভিত্তি করে স্থিতিশীল এবং গতিশীল ক্লাসগুলির জন্য বিকল্প রয়েছে।

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames({class1: true, class2 : false})} />

Answer 8

getBadgeClasses() {
    let classes = "badge m-2 ";
    classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";
    return classes;
}

<span className={this.getBadgeClasses()}>Total Count</span>

Answer 9

className={css(styles.mainDiv, 'subContainer')}

প্রতিক্রিয়া এসপিএফএক্সে এই সমাধানটি চেষ্টা ও পরীক্ষিত হয়।

আমদানির বিবৃতি যুক্ত করুন:

import { css } from 'office-ui-fabric-react/lib/Utilities';