प्रतिक्रिया में यदि ng-j के बराबर है?

Question

मैं कोणीय का उपयोग करने से प्रतिक्रिया करने के लिए आ रहा हूं और मैं कोणीय के एनजी-निर्देश के लिए एक अच्छी प्रतिक्रिया विकल्प का पता लगाने की कोशिश कर रहा हूं, जहां मैं एक शर्त के आधार पर किसी तत्व को प्रस्तुत करता हूं या न ही प्रस्तुत करता हूं। इस कोड को उदाहरण के लिए लें। मैं टाइपस्क्रिप्ट (tsx) btw का उपयोग कर रहा हूं, लेकिन यह ज्यादा मायने नहीं रखना चाहिए।

"use strict";

import * as React from 'react';

interface MyProps {showMe: Boolean}
interface MyState {}

class Button extends React.Component <MyProps, MyState>{
  constructor(props){
    super(props);
    this.state = {};
  }

  render(){
    let button;
    if (this.props.showMe === true){
       button = (
        <button type="submit" className="btn nav-btn-red">SIGN UP</button>
      )
    } else {
      button = null;
    }
    return button;

}
}
export default Button;

यह समाधान काम करता है, लेकिन क्या कोई अन्य तरीका है जो आमतौर पर इस प्रभाव को प्राप्त करने के लिए उपयोग किया जाता है? मैं सिर्फ अनुमान लगाने की तरह हूं

Comments

stackoverflow.com/a/28707437/957731

— ivarni

आपके द्वारा उपयोग की गई विधि प्रतिक्रिया में सही विधि है। टर्नेरी ऑपरेटर का उपयोग करने से आपका कोड एक पंक्ति में कम हो जाएगा लेकिन तर्क अभी भी वही होगा। ''जब आप तत्वों को प्रदान नहीं करना चाहते हैं तो आप अशक्त या रिक्त स्ट्रिंग (केवल उद्धरण) का उपयोग कर सकते हैं ।

— किशोर बारिक

सबसे हालिया आधिकारिक डॉक्टर ने ऐसा करने के लिए कुछ साफ तरीके पोस्ट किए। facebook.github.io/react/docs/...

— Downhillski

reactjs.org/docs/jsx-in-depth.html

— मोहन

Answer 1

टर्नररी ऑपरेटर के बारे में कैसे ?

render() {
  return (
    this.props.showMe ? <button type="submit" className="btn nav-btn-red">SIGN UP</button> : null
  );
}

आप यह भी उपयोग कर सकते हैं &&:

render() {
  return (
    this.props.showMe && <button type="submit" className="btn nav-btn-red">SIGN UP</button>
  );
}

टिप्पणी में जेएसएक्स को लपेटकर टिप्पणी में बड़े ब्लॉक को आसानी से नियंत्रित किया जा सकता है ():

render() {
  return this.props.showMe && (
    <div className="container">
      <button type="submit" className="btn nav-btn-red">
        SIGN UP
      </button>
    </div>
  );
}

इनलाइन भी:

render() {
  return (
    <div className="container">
      {this.props.showMe && <button type="submit" className="btn nav-btn-red">SIGN UP</button>}
    </div>
  );
}

Comments

और कोड के बड़े ब्लॉक के लिए उपयोग कैसे करें? सिर्फ इनलाइन?

— असकन

मुझे भी लगता है कि यह काफी ठीक है लेकिन यह अभी भी मुझे बदसूरत PHP और HTML मिश्रण की याद दिलाता है

— Unlimited101

मुझे

— अंगुली

मेरे लिए यह अंतहीन एनजी हैक की तुलना में बहुत क्लीनर है और जब यह उपयोग करना सबसे अच्छा है। और मुझे व्यक्तिगत रूप से जावास्क्रिप्ट-ईश अंतरिक्ष में बड़े पैमाने पर रहने में सक्षम होना पसंद है।

— सामन्था एटकिंस

@PatrickCyiza क्या आप अपनी समस्या पर विस्तार से बता सकते हैं? उथले तुलना मुद्दे की तरह लगता है।

— युया

Answer 2

मैं इसे ऐतिहासिक उद्देश्यों के लिए यहाँ छोड़ रहा हूँ, कृपया कुछ समय के लिए प्रतिक्रिया में विकसित होने के बाद एक बेहतर समाधान के लिए मेरे संपादन नीचे देखें, मैंने एक NgIf घटक का निर्माण किया (यह प्रतिक्रिया मूल है, लेकिन शायद प्रतिक्रिया के लिए काम करता है)

कोड:

import React, {Component} from "react";

class NgIf extends Component {
  render() {
    if (this.props.show) {
      return (
        this.props.children
      );
    } else {
      return null
    }
  }
}

export default NgIf;

उपयोग:

...
import NgIf from "./path/to/component"
...

class MyClass {
   render(){
      <NgIf show={this.props.show}><Text>This Gets Displayed</Text></NgIf>
   }
}

Im यह करने के लिए नया तो शायद पर सुधार किया जा सकता है, लेकिन मुझे अपने कोणीय से संक्रमण में मदद करता है

संपादित करें

बेहतर अनुभव के लिए नीचे दिए गए संपादनों को एक बार देखें

नीचे जे की टिप्पणी के लिए धन्यवाद, एक महान विचार यह भी है:

render() {
   <View>{this.props.value ? <Text>Yes</Text> : <Text>No</Text>}</View>
}

या

render() {
   <View>{this.props.value && <Text>Yes</Text>}</View>
}

कुछ अन्य उत्तरों के समान लेकिन इनलाइन काम करता है, पूरे रेंडर ब्लॉक / फंक्शन का उपयोग करने के बजाय, एक विशेष घटक की आवश्यकता नहीं होती है, और आप टर्नरी ऑपरेटर के साथ एक अन्य विवरण का उपयोग कर सकते हैं। अगर उनके मूल वस्तु मौजूद नहीं है तो प्लस स्टेटमेंट में निहित आइटम में कोई त्रुटि नहीं है। यानी अगर props.valueमौजूद नहीं है, तो props.value.value2एक त्रुटि नहीं होगी।

इस उत्तर को देखें https://stackoverflow.com/a/26152067

संपादित करें 2:

उपरोक्त लिंक ( https://stackoverflow.com/a/26152067) के अनुसार ) के अनुसार और रिएक्शन ऐप्स को विकसित करने के लिए बहुत अधिक अनुभव के बाद, उपरोक्त तरीके से चीजों को करने का सबसे अच्छा तरीका नहीं है।

प्रतिक्रिया में सशर्त ऑपरेटर वास्तव में आपके सिर के चारों ओर पाने के लिए बहुत आसान हैं। चीजों को करने के दो तरीके हैं:

//Show if someItem
{someItem && displayThis}

//Show if else
{someItem ? displayThisIfTrue : displayThisIfFalse}

यदि आप "someItem" बूलियन अभिव्यक्ति नहीं है, तो आप जो एक हिट कर सकते हैं, वह हिट हो सकता है। यदि यह कहा जाता है कि 0 प्रतिक्रिया 0 को मुद्रित करेगी या प्रतिक्रिया मूल आपको एक पाठ तत्व में "0" को लपेटने की आवश्यकता के बारे में एक त्रुटि देगी। यह आमतौर पर मिथ्या परीक्षणों के लिए समस्या नहीं है, लेकिन सत्य परीक्षण के लिए एक मुद्दा पेश करेगा। उदाहरण के लिए:

{!someItem && displayThis} //Will work just fine if item is 0 or null or "" etc
{someItem && displayThis} //Will print the value of someItem if its not falsy

मेरी अक्सर इस्तेमाल की जाने वाली ट्रिक? दोहरा नकारात्मक।

{!!someItem && displayThis}

ध्यान दें कि यह टर्नरी ऑपरेटरों पर लागू नहीं होता है (myVar? True: false) क्योंकि यह स्पष्ट रूप से परिणाम को बूलियन अभिव्यक्ति में परिवर्तित करता है।

Comments

मुझे यह सबसे अच्छा लगता है। व्यू लॉजिक का वर्णन करने के लिए घटकों और विशेषताओं का उपयोग करना।

— Jay Wick

अपडेट: होने को देखा इन उत्तरों , ऐसा लगता है इस unideal है।

— जय विक

खुद के लिए नया होने के नाते, मैं सहमत हूं, यह एक अच्छा तरीका है। मेरे द्वारा खोजे गए तरीके के साथ एक खामी यह है कि यह अभी भी त्रुटि करेगा अगर कोई वस्तु NgIf वस्तु के भीतर समाहित है जो मौजूद नहीं है। इसे इंगित करने के लिए धन्यवाद

— रयान नेल

मैं वास्तव में सराहना करता हूं कि आपने इसे समय के साथ अद्यतन किया। यह संदर्भ प्रदान करता है, धन्यवाद!

— asiegf

EDIT के लिए धन्यवाद 2. मेरा पसंदीदा समाधान

— TrueKojo

Answer 3

यदि आपके पास अन्य तत्व भी हैं तो आप सिर्फ सशर्त को लपेट सकते हैं जैसे:

render() {
  return (
    <div>Stuff</div>
    {this.props.showMe && (
      <button type="submit" className="btn nav-btn-red">SIGN UP</button>
    )}
    <div>More stuff</div>
  );
}

Comments

अन्य सुझावों में से कुछ के रूप में साफ नहीं है, लेकिन एक लाइनर के लिए महान!

— जोएल डेवी

Answer 4

थोड़ा अच्छा:

render() {
  return (
    this.props.showMe && <button type="submit" className="btn nav-btn-red">SIGN UP</button>
  );
}

Comments

नमस्ते मैं यह करने की कोशिश कर रहा हूं, लेकिन मेरे पास एक घटक में कई तत्व हैं और इसके काम नहीं कर रहे हैं

— user3653796

Answer 5

मैं सिर्फ यह जोड़ना चाहता था कि *ngIfकोणीय उस घटक को तुरंत नहीं करता है जिससे वह जुड़ा हुआ है। रिएक्ट में यदि आप स्टेटमेंट के भीतर एक स्टेटमेंट का उपयोग returnकरते हैं तो यह कंपोनेंट को प्रदर्शित नहीं होने के बावजूद तुरंत कंपोनेंट कर देगा। *ngIfप्रतिक्रिया में एक सच्चे प्रकार का व्यवहार प्राप्त करने के लिए आपको एक वैरिएबल बनाना होगा जो returnस्टेटमेंट के बाहर सशर्त घटक रखता है :

render() {

  const show = false

  return show
     ? <AwesomeComponent />   //still instantiated
     : null
}

render() {

  let c = null
  const show = false

  if (show) {
    c = <AwesomeComponent />   //not instantiated
  }
  return c
}

Answer 6

मैं कम-से-कम तीन अलग-अलग तरीकों के बारे में सोच सकता हूं ताकि रिएक्ट में एनजी-अगर कार्यक्षमता का अनुकरण किया जा सके

• अगर
• स्विच
• IIFE (तुरंत-फ़ंक्शन फ़ंक्शन को आमंत्रित किया गया)

आप यहाँ पोस्ट पढ़ सकते हैं: एंगुलर की एनजी-अगर एक प्रतिक्रिया घटक में समतुल्य है

मूल रूप से, आप ऐसा कुछ करना चाहते हैं:

var IfDemoComponent = React.createClass({
  render: function() {
    var el = null;
    if (this.props.showMe) {
      el = (
        <div>
          I am only included in the DOM if this.props.showMe evaluates to true.
        </div>
      );
    }
   return el;
  }
});

Comments

यह पूरी तरह से मुझे धन्यवाद, दिन बचाया! आपको बहुत - बहुत धन्यवाद!

— स्टीफन

Answer 7

false, null, undefined, और trueवैध बच्चे हैं। वे बस प्रस्तुत नहीं करते हैं। ये JSX एक्सप्रेशन सभी एक ही चीज़ को प्रस्तुत करेंगे:

तो आप यह कोशिश कर सकते हैं

const conditional=({condition,someArray})=>{
     return(
        <div>
          {condition && <Header /> // condition being boolean} 
          {someArray.length>0 && <Content />}
        </div>
      )
}

यह प्रतिक्रियाशील तत्वों को सशर्त रूप से प्रस्तुत करने के लिए उपयोगी हो सकता है। यह JSX केवल तभी प्रदान करता है यदि कोई शर्त सही है और केवल तभी प्रस्तुत करेगा जब someArray.length> 0

Answer 8

मुझे कोड में कई टर्नरी ऑपरेटर नहीं हैं। इसलिए मैंने कुछ उपयोगी घटकों के साथ एक पुस्तकालय बनाया। "आरसीआईएफ"

  <RcIf if={condition} >
    <h1>I no longer miss ngif</h1>
  </RcIf>
  <RcIf if={othercondition} >
    <h1>I no longer miss v-if</h1>
    <RcElse>
      <h1>I love react</h1>
    </RcElse>
  </RcIf>

आप इसे npm से स्थापित कर सकते हैं

https://www.npmjs.com/package/rc-if

Answer 9

मैं टेरस-जेएक्सएक्सएक्रू का निर्माता हूं और मुझे लगता है कि यह मॉड्यूल वास्तव में इस प्रश्न के लिए आवश्यक है जो प्रदान करता है।

JSX अभिव्यक्तियों और ES6 को मिलाने के बजाय ng-if या ng-repeat को प्राप्त करने के लिए, यह मैक्रो चीजों को उसी तरह से करने की अनुमति देता है जैसे कि AngularJS in React JSX, जैसे कि ng-if:

<div>
  <button
    tj-if={a === 0}
    id="gotoA"
    className="link"
    onClick={clicking}
  />
</div>

जो के बराबर है

<div>
  {(a === 0) && (
    <button
      id="gotoA"
      className="link"
      onClick={clicking}
    />
  )}
</div>

यह देखते हुए कि क्रिएट-रिएक्शन-ऐप का लेटेस्ट वर्जन बाबेल-मैक्रो बॉक्स से बाहर है, आपको बस इतना करना है कि इस मॉड्यूल को एनपीएम इंस्टॉल करें, रेंडर रिटर्न को "टेरस" के साथ लपेटें और उन प्रॉप्स को असाइन करना शुरू करें।

आप इसे यहां से स्थापित कर सकते हैं: https://www.npmjs.com/package/tersus-jsx.macro

Comments

बढ़िया पैकेज!

— secavfr

Answer 10

मैं एक कोणीय पृष्ठभूमि से भी आ रहा हूं और टैग को दिखाने के लिए एक सरल एक लाइनर की तलाश कर रहा था यदि चर में कोई तत्व था। यह मेरे लिए काम किया:

<div className="comic_creators">
    {c.creators.available > 0 ? <h4>Creators</h4> : null }
    {c.creators.items.map((creator,key) =>
        <Creator creator={creator} key={key}></Creator>
    )}
</div>

Answer 11

मैं एक्सप्रेशन और दो अन्य दलीलें लेने का एक तरीका बनाता हूं, जैसा कि अभिव्यक्ति की सच्चाई के मामले में टेम्पलेट और दूसरा विकल्प है

export function rif(exp, template, elseTemplate = null) {
    if (exp) {
        return template;
    } else {
        return elseTemplate;
    }
}

और मैं इसे इस तरह से उपयोग करता हूं

import { rif } from '../utilities';

...
render() {
        return (
            <main role="main" className="container">

                {rif(
                    this.movies.length > 0,
                    <p>Showing {this.movies.length} movies. </p>,
                    <p>There are no movies..</p>
                )}
            </main>
        );
    }

Answer 12

व्यक्तिगत रूप से मुझे गेटर्स का उपयोग करना पसंद है, यह स्वच्छ है और प्रतिक्रियाशीलता का आश्वासन देता है:

get toBeDisplayed(){
  const { someLogicState } = this.state;
  if(someLogicState)
    return (
      <div>
        Hi, world !
      </div>
    );
  else
    return null;
}

render(){
  return (<div>{this.toBeDisplayed}</div>);
}

Answer 13

मैं कोणीय और प्रतिक्रिया दोनों पर काम कर रहा हूं। मुझे लगता है कि angularविभिन्न निर्देशों के माध्यम से तार्किक स्थिति का अच्छी तरह से प्रबंधन किया जाता है।

में reactjsइस दृष्टिकोण अलग तरह से काम करते हैं।

आप के if elseरूप returnमें render functionया हालत का उपयोग कर सकते हैं ternary operator।

अगर और के साथ

  render(){
    
    const auth = true;
    
    if(!auth)
      return(
      <div className="ps-checkout__login">
        <div className="d-flex flex-row">
            <div className="p-2"><img src="../../../static/img/return-customer.png"></img> 
             Returning Customer?</div>
            <div className="p-2"> 
                <Link href="/account/login">
                    <a>                            
                        Click here to login
                    </a>
                </Link>
            </div>
        </div>
    </div>
    )
  else return null;
    }

टर्नरी ऑपरेटर के साथ

{ auth?
    (<div className="ps-checkout__login">
        <div className="d-flex flex-row">
            <div className="p-2"><img src="../../../static/img/return-customer.png"></img> 
            Returning Customer?</div>
            <div className="p-2"> 
                <Link href="/account/login">
                    <a>                            
                        Click here to login
                    </a>
                </Link>
            </div>
        </div>
    </div>):null }