শর্তাধীন শ্রেণীর বৈশিষ্ট্য প্রয়োগ করে জেএসকে প্রতিক্রিয়া জানান

Question

অভিভাবক উপাদানটি যা দেখতে দেখতে পাওয়া যায় তার উপর নির্ভর করে আমি শর্তসাপেক্ষে এই বোতামটির গোষ্ঠীটি প্রদর্শন এবং আড়াল করতে চাই:

<TopicNav showBulkActions={this.__hasMultipleSelected} />

....

__hasMultipleSelected: function() {
  return false; //return true or false depending on data
}

....

var TopicNav = React.createClass({
render: function() {
return (
    <div className="row">
        <div className="col-lg-6">
            <div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}">
                <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                  Bulk Actions <span className="caret"></span>
                </button>
                <ul className="dropdown-menu" role="menu">
                  <li><a href="#">Merge into New Session</a></li>
                  <li><a href="#">Add to Existing Session</a></li>
                  <li className="divider"></li>
                  <li><a href="#">Delete</a></li>
                </ul>
            </div>
        </div>
    </div>
    );
  }
});

{This.prop.showBulkAtions দিয়ে তবে কিছুই হচ্ছে না? 'লুকোনো জিনিষ দেখাও'}. আমি কি এখানে কিছু ভুল করছি?

Comments

আপনি প্রতিক্রিয়া-বুটস্ট্র্যাপ বিবেচনা করতেও ইচ্ছুক হতে পারেন , যেহেতু এটি ক্লাসের কিছু উপাদানকে উপাদান বৈশিষ্ট্যগুলিতে বিমূর্ত করে তোলে, যা আপনি কিছুটা সহজ করার চেষ্টা করছেন making

— ড্যানক্রাম্ব

Answer 1

কোঁকড়া ধনুর্বন্ধনী স্ট্রিংয়ের ভিতরে রয়েছে, সুতরাং এটি স্ট্রিং হিসাবে মূল্যায়ন করা হচ্ছে। তাদের বাইরে থাকা দরকার, সুতরাং এটি কাজ করা উচিত:

<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}>

"টান-ডান" এর পরে স্থানটি নোট করুন। আপনি দুর্ঘটনাক্রমে "পুল-রাইট শো" এর পরিবর্তে ক্লাশ "পুল-রাইটসো" সরবরাহ করতে চান না। এছাড়াও প্রথম বন্ধনী সেখানে থাকা দরকার।

Comments

ধন্যবাদ! আমাকে এটিকে কিছুটা সংশোধন করতে হয়েছিল কারণ কোনও কারণে এটি বিটিএন-গ্রুপের পুল-রাইটকে আউটপুট দিচ্ছিল না। শুধু দেখান বা লুকানো।

— এপেক্সডজ

এটি বিশেষত যেখানে classnamesউপযুক্ত নাও হতে পারে সেখানে বিশেষভাবে সহায়ক । আপনি যদি আপনার renderফাংশনে থাকেন এবং আপনার কাছে একটি রয়েছে map, আপনি কেবলমাত্র যখন জানবেন যে আপনি যখন ক্লাসটি রেন্ডার করছেন তখন আপনি কোনও ক্লাস যুক্ত করতে চান কিনা, তাই এই উত্তরটি তার পক্ষে বেশ কার্যকর।

— ডেভ কুপার

আপনার রেন্ডার বা রিটার্নে শর্তসাপেক্ষ টেম্পলেটগুলির একগুচ্ছ থাকার পরিবর্তে দুর্দান্ত বিকল্প

— ডিভনজ

আপনার কে কি পরিবর্তন করতে হবে তা @apexdodge করুন। আমি একই সমস্যা আছে।

— রামওয়াই

@ র‌্যামওয়াই এক উপায় হ'ল সমস্ত ক্লাসকে শর্তযুক্ত করে রাখা this.props.showBulkActions ? 'btn-group pull-right show' : 'btn-group pull-right hidden')। মার্জিত নয় তবে এটি কাজ করে।

— আয়ান

Answer 2

অন্যরা যেমন মন্তব্য করেছেন, শ্রেণীবদ্ধকরণের ইউটিলিটি হ'ল রি্যাক্টজেগুলিতে শর্তযুক্ত সিএসএস শ্রেণীর নামগুলি হ্যান্ডেল করার জন্য বর্তমানে প্রস্তাবিত পদ্ধতি approach

আপনার ক্ষেত্রে, সমাধানটি দেখতে পাবেন:

var btnGroupClasses = classNames(
  'btn-group',
  'pull-right',
  {
    'show': this.props.showBulkActions,
    'hidden': !this.props.showBulkActions
  }
);

...

<div className={btnGroupClasses}>...</div>

পার্শ্ব নোট হিসাবে, আমি আপনাকে উভয় showএবং hiddenক্লাস ব্যবহার না করার চেষ্টা করার পরামর্শ দিচ্ছি , যাতে কোডটি সহজতর হতে পারে। সম্ভবত কোনও কিছু ডিফল্টরূপে দেখানোর জন্য আপনার ক্লাস সেট করার দরকার নেই।

Comments

আপনি ক্লাস নামগুলির ইউটিলিটিটি "বর্তমানে প্রস্তাবিত পদ্ধতির" হিসাবে বর্ণনা করতে পারেন? এটি কি কোথাও কিছু সম্মানিত সেরা অনুশীলনের নথিতে বন্দী? বা প্রতিক্রিয়া এবং classNamesএই মুহুর্তে মুখের শব্দটির সাজান ?

— আলেকজান্ডার নিড

@ অ্যানিড লেখার সময় এটি অফিসিয়াল প্রতিক্রিয়া নথিতে সুপারিশ করা হয়েছিল: web.archive.org/web/20160602124910/http://facebook.github.io:80/…

— দিয়েগো ভি

এটি সর্বশেষতম ডকুমেন্টেশনে এখনও উল্লেখ করা হয়েছে : " আপনি যদি প্রায়শই এই জাতীয় কোড লেখার সন্ধান করেন তবে শ্রেণিকাম প্যাকেজটি এটিকে সহজতর করতে পারে " "

— ফ্রাঙ্কলিন ইউ

Answer 3

আপনি যদি ট্রান্সপ্লেলার ব্যবহার করে থাকেন (যেমন বাবেল বা ট্রেসুর) আপনি নতুন ES6 " টেম্পলেট স্ট্রিং ব্যবহার করতে পারেন " ।

এখানে @ স্পিটফায়ার 109 এর উত্তর, সেই অনুযায়ী সংশোধন করা হয়েছে:

<div className={`btn-group pull-right ${this.props.showBulkActions ? 'shown' : 'hidden'}`}>

এই পদ্ধতির সাহায্যে আপনি এমন সুন্দর ঝরঝরে জিনিস উপস্থাপন করতে পারবেন, হয় s-is-shownবা রেন্ডারিং করুন s-is-hidden:

<div className={`s-${this.props.showBulkActions ? 'is-shown' : 'is-hidden'}`}>

Comments

দ্বিতীয় পদ্ধতির সাথে বিশেষত সতর্কতা অবলম্বন করুন, বিশেষত বৃহত্তর কোডবেসে, কারণ এটি শ্রেণীর স্ট্রিংগুলিকে কম গ্রেপবেবল করে তোলে। উদাহরণস্বরূপ, যদি কেউ কোডবেস অনুসন্ধান করে s-is-shownবা s-is-hiddenসন্ধান করে তবে তারা এই কোডটি পাবেন না।

— চিহ্নিত করুন

Answer 4

আপনি এখানে স্ট্রিং আক্ষরিক ব্যবহার করতে পারেন

const Angle = ({show}) => {

   const angle = `fa ${show ? 'fa-angle-down' : 'fa-angle-right'}`;

   return <i className={angle} />
}

Answer 5

@ স্পিটফায়ার 109 এর উত্তম উত্তরের জন্য ব্যয় করে, কেউ এরকম কিছু করতে পারে:

rootClassNames() {
  let names = ['my-default-class'];
  if (this.props.disabled) names.push('text-muted', 'other-class');

  return names.join(' ');
}

এবং তারপরে রেন্ডার ফাংশনের মধ্যে:

<div className={this.rootClassNames()}></div>

jsx সংক্ষিপ্ত রাখে

Answer 6

অথবা এনপিএম ক্লাসের নাম ব্যবহার করুন । ক্লাসের তালিকা তৈরির জন্য এটি খুব সহজ এবং দরকারী

Answer 7

ক্ষেত্রে আপনার কেবলমাত্র একটি optionচ্ছিক শ্রেণীর নাম প্রয়োজন হবে:

<div className={"btn-group pull-right " + (this.props.showBulkActions ? "show" : "")}>

Comments

falseশর্ত ব্যর্থ হলে এটি ক্লাস সংযোজন করবে ।

— আরএ

না, এটি হয় না

— madhu131313

Answer 8

আপনি ক্লাসের নামের পরিবর্তে ES6 অ্যারে ব্যবহার করতে পারেন। উত্তরটি ডাঃ অ্যাক্সেল রাউশমায়ার নিবন্ধের ভিত্তিতে তৈরি হয়েছে: শর্তাধীন অ্যারে এবং অবজেক্ট ল্যাটারেলের ভিতরে প্রবেশদ্বার যুক্ত করা ।

<div className={[
                 "classAlwaysPresent", 
                 ...Array.from(condition && ["classIfTrue"])
                ].join(" ")} />

Comments

দয়া করে এটিকে প্রসারিত করুন, শর্ত কী?

— mibbit

কনস্টেট শর্ত = (1 === 1);

— টিউডর মোড়ার

Answer 9

2019:

প্রতিক্রিয়া হ'ল অনেক উপযোগ লেক lake তবে এর জন্য আপনার কোনও npmপ্যাকেজ দরকার নেই । শুধু কোথাও ফাংশন তৈরি করুন classnamesএবং আপনার প্রয়োজন হলে এটি কল করুন;

function classnames(obj){
  return Object.entries(obj).filter( e => e[1] ).map( e=>e[0] ).join(' ');
}

অথবা

function classnames(obj){
 return Object.entries(obj).map( ([k,v]) => v?k:'' ).join(' ');
}

উদাহরণ

  stateClass= {
    foo:true,
    bar:false,
    pony:2
  }
  classnames(stateClass) // return 'foo pony'

 <div className="foo bar {classnames(stateClass)}"> some content </div>

শুধু অনুপ্রেরণার জন্য

সহায়ক উপাদান ঘোষণা এবং এটি toggleপদ্ধতি ব্যবহার

(DOMToken​List)classList.toggle(class,condition)

উদাহরণ:

const classes = document.createElement('span').classList; 

function classstate(obj){
  for( let n in obj) classes.toggle(n,obj[n]);
 return classes; 
}

Answer 10

আরও মার্জিত সমাধান, যা রক্ষণাবেক্ষণ এবং পাঠযোগ্যতার জন্য ভাল:

const classNames = ['js-btn-connect'];

if (isSelected) { classNames.push('is-selected'); }

<Element className={classNames.join(' ')}/>

Answer 11

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

<div className={"btn-group pull-right" + (this.props.showBulkActions ? ' show' : ' hidden')}>

Answer 12

এটি আপনার জন্য কাজ করবে

var TopicNav = React.createClass({
render: function() {

let _myClasses = `btn-group pull-right {this.props.showBulkActions?'show':'hidden'}`;

return (
            ...
            <div className={_myClasses}>
               ...
            </div>
    );
  }
});

Answer 13

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

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

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

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

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

Answer 14

আপনার মানের উপর ভিত্তি করে this.props.showBulkActionsনিম্নরূপে গতিশীলভাবে ক্লাসগুলি স্যুইচ করতে পারেন।

<div ...{...this.props.showBulkActions 
? { className: 'btn-group pull-right show' } 
: { className: 'btn-group pull-right hidden' }}>

Answer 15

আমি যোগ করতে চাই আপনি ক্লাসের অংশ হিসাবে একটি পরিবর্তনশীল সামগ্রীও ব্যবহার করতে পারেন

<img src={src} alt="Avatar" className={"img-" + messages[key].sender} />

প্রসঙ্গটি বট এবং ব্যবহারকারীর মধ্যে একটি চ্যাট এবং প্রেরকের উপর নির্ভর করে শৈলীগুলি পরিবর্তন হয়, এটি ব্রাউজারের ফলাফল:

<img src="http://imageurl" alt="Avatar" class="img-bot">

Answer 16

আপনি যখন একাধিক শ্রেণি সংযোজন করতে পারেন তখন এটি কার্যকর। আপনি একটি স্থান দিয়ে অ্যারেতে সমস্ত শ্রেণিতে যোগদান করতে পারেন।

const visibility = this.props.showBulkActions ? "show" : ""
<div className={["btn-group pull-right", visibility].join(' ')}>

Answer 17

প্রতিস্থাপন করুন:

<div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}">`

সঙ্গে:

<div className={`btn-group pull-right ${this.props.showBulkActions ? 'show' : 'hidden'}`}

Answer 18

@ স্প্লিট ফায়ার উত্তরের রেফারেন্স, আমরা এটি টেমপ্লেট লিটারালগুলির সাথে আপডেট করতে পারি, যা আরও পাঠযোগ্য, রেফারেন্সের জন্য চেকআউট জাভাস্ক্রিপ্ট টেম্পলেট আক্ষরিক

<div className={`btn-group pull-right ${this.props.showBulkActions ? 'show' : 'hidden'}`}>

Answer 19

আমি দেখেছি এই ব্যাখ্যা করেছেন যে কিভাবে তিন সাথে এবং Classnames লাইব্রেরির সাথে এটা করতে