दृश्यता = छुपा संभालने का React.js तरीका क्या है?

Question

प्रतिक्रिया support तत्वों के लिए दृश्यता विशेषता नहीं है।

इसलिए यदि मैं पृष्ठ पर कोई तत्व दिखाना या छिपाना चाहता हूं, लेकिन छिपे हुए स्थान पर अभी भी स्थान लेना है तो लेआउट नहीं बदलता है, मैं ऐसा कुछ कैसे करूं?

<i className="fa fa-trash" visibility={this.state.showButton ? "visible": "hidden"} /> 

Answer 1

आप इसके लिए एक सीएसएस कक्षा का उपयोग कर सकते हैं और अपने क्लासनाम को गतिशील रूप से संशोधित कर सकते हैं। उदाहरण के लिए:

<i className={this.state.showButton ? "fa fa-trash" : "fa fa-trash hidden"} />

Answer 2

आप इस के लिए सीएसएस का उपयोग कर सकते हैं।

<i className="fa fa-trash" style={{visibility: this.state.showButton ? 'visible' : 'hidden' }} /> 

जानें inline styles in React

Answer 3

यह और अधिक के बारे में सीएसएस-विशेषता ताकि आप इनलाइन शैलियों का उपयोग कर सकते हैं: स्वीकार किए जाते हैं जवाब पूरी तरह से काम करता है

... 
var visibilityState = this.state.showButton ? "visible" : "hidden"; 
return (
    <i className="fa fa-trash" style={{visibility: visibilityState}}/> 
); 
... 

Answer 4

, मैं classnames NPM package के रूप में उल्लेख करना चाहते हैं इसे अधिक डीआरवाई-अनुकूल तरीके से कार्यान्वित करने का एक वैकल्पिक तरीका। कि पैकेज के साथ, आप दो तार के बीच अन्य, स्थैतिक कक्षाओं नकल की जरूरत नहीं है:

<i className={classNames("fa", "fa-trash", {"hidden": !this.state.showButton})} />