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




css twitter-bootstrap-3 (11)

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'

प्रेरणा के लिए सिर्फ बोनस

आप सहायक तत्व की घोषणा कर सकते हैं और इसे DOMToken सूची तक पहुँच पाने के लिए क्लासिस्ट ले सकते हैं और शायद ऐसा कुछ लिख सकते हैं

const classes = document.createElement('span').classList; //DOMToken​List;
function classnames(obj){
 classes.value = '';
 return Object.entries(obj).reduce( (c, [k,v]) => (c.toggle(k,v),c), classes ).value;

}

मैं इस बटन समूह को सशर्त दिखाना और छिपाना चाहता हूं जो इस तरह दिखता है कि मूल घटक से क्या पारित किया गया है:

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


@ 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 को छोटा रखता है


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

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

आप इसका उपयोग कर सकते हैं:

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

आप यहाँ स्ट्रिंग शाब्दिक का उपयोग कर सकते हैं

const Angle = ({show}) => {

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

   return <i className={angle} />
}

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

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

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


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

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

मैं यह जोड़ना चाहूंगा कि आप वर्ग के एक हिस्से के रूप में एक परिवर्तनीय सामग्री का भी उपयोग कर सकते हैं

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

संदर्भ एक बॉट और उपयोगकर्ता के बीच एक चैट है, और प्रेषक के आधार पर शैलियों में बदलाव होता है, यह ब्राउज़र परिणाम है:

var Count=React.createClass({
getInitialState: function()
{
var state={counter:1};

setInterval(function(){
this.setState(
{counter:this.state.counter+(this.state.counter==1000?9999999999:1)})
}.bind(this),1);
return state;
},

render:function(){
return(
<div>
Counter<br/>
{this.state.counter}
</div>
)
}
}
)

यदि आप एक ट्रांसपिलर (जैसे कि Babel या ट्रेसेर) का उपयोग कर रहे हैं, तो आप नए ईएस 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'}`}>

यह आपके लिए काम करेगा

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

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

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


this.props.showBulkActions के मान के आधार पर आप वर्गों को गतिशील रूप से निम्नानुसार स्विच कर सकते हैं।

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




class-attributes