प्रतिक्रियाशील जेएस सशर्त रूप से वर्ग विशेषताओं को लागू करते हैं

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.props.showBulkActions के साथ कुछ भी नहीं हो रहा है? 'छुपा हुआ दिखाए'}। क्या मैं यहाँ कुछ गलत कर रहा हूँ?

Comments

आप प्रतिक्रिया-बूटस्ट्रैप पर विचार करना चाह सकते हैं , क्योंकि इस सार में क्लास के कुछ सामान घटक गुणों में बदल जाते हैं, जिससे आप थोड़ा आसान करने की कोशिश कर रहे हैं।

— १०:३१

Answer 1

घुंघराले ब्रेसिज़ स्ट्रिंग के अंदर होते हैं, इसलिए इसे स्ट्रिंग के रूप में मूल्यांकन किया जा रहा है। उन्हें बाहर होना चाहिए, इसलिए यह काम करना चाहिए:

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

"पुल-राइट" के बाद अंतरिक्ष पर ध्यान दें। आप गलती से "पुल-राइट शो" के बजाय कक्षा को "पुल-राइटशो" प्रदान नहीं करना चाहते हैं। साथ ही कोष्ठक भी होना चाहिए।

Comments

धन्यवाद! मुझे इसे थोड़ा संशोधित करना पड़ा क्योंकि किसी कारण से यह बीटीएन-समूह पुल-राइट का उत्पादन नहीं कर रहा था। बस दिखाओ या छिपाओ।

— एपेक्सडॉज

यह कुछ मामलों में विशेष रूप से सहायक है जहां classnamesउपयुक्त नहीं हो सकता है। यदि आप अपने renderकार्य में हैं और आपके पास एक है map, तो आप केवल यह जान सकते हैं कि आप जिस समय इसे प्रदान कर रहे हैं, उसमें एक वर्ग जोड़ना चाहते हैं, इसलिए यह उत्तर उसके लिए काफी उपयोगी है।

— डेव कूपर

अपने रेंडर या वापसी में सशर्त टेम्पलेट्स का एक गुच्छा होने के बजाय महान विकल्प

— 1717 devonj

@apexdodge आपको क्या संशोधन करना था। मेरे साथ भी वही दिक्कत है।

— राम्या

@ रेमी एक तरीका है कि सभी वर्गों को सशर्त अंदर रखा जाए this.props.showBulkActions ? 'btn-group pull-right show' : 'btn-group pull-right hidden')। सुरुचिपूर्ण नहीं है लेकिन यह काम करता है।

— इयान

Answer 2

के रूप में दूसरों को टिप्पणी की है, classnames उपयोगिता ReactJs में सशर्त सीएसएस वर्ग के नाम को संभालने के लिए वर्तमान में सिफारिश की दृष्टिकोण है।

आपके मामले में, समाधान जैसा दिखेगा:

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

...

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

एक साइड नोट के रूप में, मैं आपको सुझाव दूंगा कि दोनों showऔर hiddenवर्गों का उपयोग करने से बचने की कोशिश करें , ताकि कोड सरल हो सके। सबसे अधिक संभावना है कि आपको डिफ़ॉल्ट रूप से दिखाए जाने के लिए किसी वर्ग को सेट करने की आवश्यकता नहीं है।

Comments

क्या आप "वर्तमान में अनुशंसित दृष्टिकोण" होने के कारण क्लासनेम की उपयोगिता के बारे में विस्तार से बता सकते हैं? क्या यह कुछ अच्छी तरह से प्रचलित सर्वोत्तम प्रथाओं के दस्तावेज में कहीं पकड़ा गया है? या प्रतिक्रिया के चारों ओर मुंह का शब्द और classNamesइस समय?

— अलेक्जेंडर ने

@anied लेखन के समय आधिकारिक प्रतिक्रिया दस्तावेज में इसकी सिफारिश की गई थी: web.archive.org/web/20160602124910/http://facebook.github.io:80/…

— डिएगो V

यह अभी भी नवीनतम दस्तावेज़ीकरण में उल्लिखित है : " यदि आप अक्सर अपने आप को इस तरह का कोड लिखते हुए पाते हैं, तो क्लासनेम पैकेज इसे सरल बना सकता है। "

— फ्रैंकलिन यू

Answer 3

यदि आप एक ट्रांसपिलर (जैसे बाबेल या ट्रेसेर) का उपयोग कर रहे हैं, तो आप नए ईएस 6 " टेम्पलेट स्ट्रिंग्स " का उपयोग कर सकते हैं ।

यहाँ @ spitfire109 का उत्तर दिया गया है, तदनुसार संशोधित:

<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

@ Spitfire109 के ठीक जवाब पर खर्च, एक व्यक्ति कुछ इस तरह कर सकता है:

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

या npm वर्गनाम का उपयोग करें । यह विशेष रूप से कक्षाओं की सूची के निर्माण के लिए बहुत आसान और उपयोगी है

Answer 7

मामले में आपको केवल एक वैकल्पिक वर्ग नाम की आवश्यकता होगी:

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

Comments

falseजब स्थिति विफल हो जाएगी तो यह कक्षा को जोड़ देगा ।

— आरए

Answer 8

आप क्लास के नामों के बजाय ES6 सरणियों का उपयोग कर सकते हैं। इसका उत्तर डॉ। एक्सल रौशमायर लेख पर आधारित है: सशस्त्र और वस्तु शाब्दिक रूप से प्रविष्टियाँ जोड़ना ।

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

Comments

कृपया इस पर विस्तार करें, क्या स्थिति है?

— mibbit

const condition = (1 === 1);

— ट्यूडर मोरार

Answer 9

2019:

प्रतिक्रिया झील की बहुत सारी उपयोगिताओं है। लेकिन उसके लिए आपको किसी 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

आप इस npm पैकेज का उपयोग कर सकते हैं । यह सब कुछ संभालता है और एक चर या फ़ंक्शन के आधार पर स्थिर और गतिशील वर्गों के लिए विकल्प होता है।

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

@Split आग जवाब के संदर्भ में, हम इसे टेम्प्लेट शाब्दिक के साथ अपडेट कर सकते हैं, जो अधिक पठनीय है, संदर्भ के लिए चेकआउट जावास्क्रिप्ट टेम्पलेट शाब्दिक

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

Answer 19

मुझे यह मिला जो बताता है कि इसे टर्नरी के साथ और क्लासनेम लाइब्रेरी के साथ कैसे करना है