কীভাবে শর্তসাপেক্ষ উপাদান থাকবে এবং ফেসবুক রিএ্যাক্টের জেএসএক্সের সাথে ডিআরওয়াই রাখবে?

Question

কীভাবে আমি জেএসএক্সে কোনও উপাদান অন্তর্ভুক্ত করব? এখানে একটি ব্যানার ব্যবহার করার একটি উদাহরণ রয়েছে যা এটি পাস করা হয়ে থাকলে সেই উপাদানটিতে থাকা উচিত What

render: function () {
    var banner;
    if (this.state.banner) {
        banner = <div id="banner">{this.state.banner}</div>;
    } else {
        banner = ?????
    }
    return (
        <div id="page">
            {banner}
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

Comments

আপনার যদি কেবল elseশাখা না থাকে তবে কী কাজ করে? আমি জেএসএক্সের সাথে পরিচিত নই ...

— টম ফেনেক

চমৎকার, এটি সাহায্য করেছে। এছাড়াও github.com/facebook/react/issues/690 দেখুন

— গ্যাব্রিয়েল ফ্লোরিট

প্রতিক্রিয়াতে শর্তাধীন রেন্ডারিংয়ের বিকল্পগুলির সম্পূর্ণ তালিকা: রবিনউইয়ারচ.ডি

— রবিন ওয়ারিয়ুচ

Answer 1

অপরিবর্তিত হিসাবে কেবল ব্যানারটি ছেড়ে দিন এবং এটি অন্তর্ভুক্ত হয় না।

Comments

আমি এই উত্তরের পাশে আবর্জনা ছাড়া আর কিছুই ভাবতে পারি না ... যেন আমি দেবতাদের

— হুমড়ি খেয়েছি

কি nullহিসাবে ঠিক যেমন ভাল কাজ undefined? এছাড়াও সেই অনুমানের অংশটি কি এটি এইভাবে কাজ করে এবং ভবিষ্যতে ভাঙ্গার সম্ভাবনা নেই?

— হিপ্পিট্রেইল

Answer 2

এই সম্পর্কে কি. আসুন একটি সহজ সহায়ক Ifউপাদান সংজ্ঞায়িত করা যাক ।

var If = React.createClass({
    render: function() {
        if (this.props.test) {
            return this.props.children;
        }
        else {
            return false;
        }
    }
});

এবং এটি এইভাবে ব্যবহার করুন:

render: function () {
    return (
        <div id="page">
            <If test={this.state.banner}>
                <div id="banner">{this.state.banner}</div>
            </If>
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

আপডেট: আমার উত্তরটি জনপ্রিয় হওয়ার সাথে সাথে এই সমাধানের সাথে সম্পর্কিত সবচেয়ে বড় বিপদ সম্পর্কে আপনাকে সতর্ক করতে আমি বাধ্য বোধ করি। অন্য উত্তরে নির্দেশিত হিসাবে, <If />উপাদানটি সত্য বা মিথ্যা কিনা তা বিবেচনা না করেই উপাদানটির অভ্যন্তরের কোডটি সর্বদা কার্যকর করা হয়। অতএব নিম্নলিখিত উদাহরণে ক্ষেত্রে ব্যর্থ হবে bannerহয় null(দ্বিতীয় লাইনে সম্পত্তি এক্সেস নোট):

<If test={this.state.banner}>
    <div id="banner">{this.state.banner.url}</div>
</If>

আপনি এটি ব্যবহার করার সময় আপনাকে যত্নবান হতে হবে। আমি বিকল্প (নিরাপদ) পদ্ধতির জন্য অন্যান্য উত্তরগুলি পড়ার পরামর্শ দিচ্ছি।

আপডেট 2: ফিরে তাকানো, এই পদ্ধতির না শুধুমাত্র বিপজ্জনক, কিন্তু মারাত্মক জটিল। এটির একটি আদর্শ উদাহরণ যখন কোনও বিকাশকারী (আমি) নিদর্শনগুলি স্থানান্তরিত করার চেষ্টা করে এবং তিনি জানেন যে তিনি এক অঞ্চল থেকে অন্য অঞ্চলে জেনেছেন তবে এটি কার্যকরভাবে কাজ করে না (এই ক্ষেত্রে অন্যান্য টেম্পলেট ভাষা)।

আপনার যদি শর্তসাপেক্ষ উপাদান দরকার হয় তবে এটি করুন:

render: function () {
    return (
        <div id="page">
            {this.state.banner &&
                <div id="banner">{this.state.banner}</div>}
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

আপনার যদি অন্য কোনও শাখার প্রয়োজন হয় তবে কেবল একটি টের্নারি অপারেটর ব্যবহার করুন:

{this.state.banner ?
   <div id="banner">{this.state.banner}</div> :
   <div>There is no banner!</div>
}

এটি আরও খাটো, আরও মার্জিত এবং নিরাপদ। আমি সব সময় এটি ব্যবহার। একমাত্র অসুবিধা হ'ল আপনি else ifসহজে শাখাটি করতে পারবেন না তবে এটি সাধারণত তেমন সাধারণ হয় না।

যাইহোক, জাভাস্ক্রিপ্টে যৌক্তিক অপারেটররা কীভাবে কাজ করে তার জন্য এটি সম্ভব ধন্যবাদ । লজিকাল অপারেটররা এমনকি এ জাতীয় ছোট কৌশলগুলিও অনুমতি দেয়:

<h3>{this.state.banner.title || 'Default banner title'}</h3>

Comments

ধন্যবাদ। আমি এই github.com/facebook/react/issues/690 পড়ার পরামর্শ দিচ্ছি এই লিঙ্কটি মন্তব্যটিতে পোস্ট করা হয়েছে এই প্রশ্নটি নীচে এবং আমার সমাধান পোস্ট করার পরে আমি এটি লক্ষ্য করেছি। আপনি যদি এটি পরীক্ষা করেন তবে কিছু লোক এই সমাধানটিরও উল্লেখ করেছেন তবে এটি সুপারিশ করেন না। আমি ব্যক্তিগতভাবে মনে করি এটি ঠিক আছে, কমপক্ষে ওপি-র ক্ষেত্রে, তবে এটি সত্য যে এই উপায়টি নিখুঁত নয় (উদাহরণস্বরূপ অন্য শাখাকে সংজ্ঞায়নের জন্য কোনও দুর্দান্ত উপায় নেই)। যাইহোক, এটি পড়া মূল্য।

— tobik

নিশ্চিত হতে পারছি না যদি এই এখনও সর্বশেষ সংস্করণ হিসাবে কাজ করে একটি হতে ফিরে মান প্রয়োজন বলে মনে হয়ReactElement

— srph

এটি কেবল অন্য একটি উপাদান দিয়ে মুড়িয়ে দিন, <span>বা <div>।

— tobik

আমি যখন <t>> বা <টেবিল> এ খালি রেন্ডার করতে এটি ব্যবহার করার চেষ্টা করেছি তখনই সমস্যা আছে কারণ <নোট্রিপ্ট> <tr> এর জন্য শিশু হিসাবে গ্রহণযোগ্য নয়। অন্যথায় এটি আমার পক্ষে ভাল কাজ করে।

— সবুজ সু

আপনি যদি এটি করতে যাচ্ছেন তবে একটি প্রতিস্থাপনের পদ্ধতিটি খুব ভাল n npmjs.com/package/jsx-control-statements

— স্টিভ

Answer 3

ব্যক্তিগতভাবে, আমি সত্যই বলেছি যে ত্রিদেশীয় এক্সপ্রেশনগুলি শোতে ( জেএসএক্স ইন গভীরতা ) রি্যাকটজেস মানগুলির সাথে সামঞ্জস্যপূর্ণ সবচেয়ে প্রাকৃতিক উপায়।

নিম্নলিখিত উদাহরণ দেখুন। এটি প্রথম দর্শনে একটু অগোছালো তবে বেশ ভালভাবে কাজ করে।

<div id="page">
  {this.state.banner ? (
    <div id="banner">
     <div class="another-div">
       {this.state.banner}
     </div>
    </div>
  ) : 
  null} 
  <div id="other-content">
    blah blah blah...
  </div>
</div>

Comments

দ্রষ্টব্য: বন্ধনীগুলি একটি উপাদান ফেরতের সমান, সুতরাং আপনার সামগ্রীটি <div> </div> দ্বারা ঘিরে থাকা দরকার।

— জোটিডি

@ শেইদো আপনি তার পরিবর্তে জনপ্রিয় উত্তরটি কেন পছন্দ করেন? এটি দুর্দান্ত কাজ করে বলে মনে হচ্ছে।

— স্নোম্যান

@ মোবি আমি মনে করি জনপ্রিয় উত্তরটি আরও গতিশীল এবং এর ফলে একটি ক্লিনার রেন্ডার ফাংশন আসে। এই পদ্ধতির সাথে, যদি আপনার একাধিক শর্ত থাকে? আপনার কাছে এখন এই অদ্ভুত ফর্ম্যাটটি দিয়ে বাসা বেঁধে পাগল হবে এবং শর্তসিয়ালের ভিত্তিতে দুটি পৃথক ক্ষেত্রে একই পরিবর্তনের প্রয়োজন হলে আপনাকে এখন শর্তসাপেক্ষে আবার লিখতে হবে। যদিও আমার মতামত! :)

— চিডো

সম্পর্কিত পৃষ্ঠাটিও বেশ কার্যকর: facebook.github.io/react/docs/…

— নীল

Answer 4

আপনি এটি লিখতে পারেন

{ this.state.banner && <div>{...}</div> }

যদি আপনার state.bannerহয় nullবা undefined, শর্তের ডান দিকটি এড়িয়ে যায়।

Answer 5

Ifশৈলী উপাদান বিপজ্জনক কারণ কোড ব্লক করা হয় সবসময় মৃত্যুদন্ড কার্যকর অবস্থার হোক না কেন। উদাহরণস্বরূপ, এটি যদি একটি নাল ব্যতিক্রম ঘটায় তবে bannerতা হ'ল null:

//dangerous
render: function () {
  return (
    <div id="page">
      <If test={this.state.banner}>
        <img src={this.state.banner.src} />
      </If>
      <div id="other-content">
         blah blah blah...
      </div>
    </div>
  );
}

অন্য বিকল্পটি হ'ল একটি ইনলাইন ফাংশন (অন্য বিবৃতিতে বিশেষত কার্যকর):

render: function () {
  return (
    <div id="page">
      {function(){
        if (this.state.banner) {
          return <div id="banner">{this.state.banner}</div>
        }
      }.call(this)}
      <div id="other-content">
         blah blah blah...
      </div>
    </div>
  );
}

প্রতিক্রিয়া ইস্যু থেকে অন্য বিকল্প :

render: function () {
  return (
    <div id="page">
      { this.state.banner &&
        <div id="banner">{this.state.banner}</div>
      }
      <div id="other-content">
         blah blah blah...
      </div>
    </div>
  );
}

Comments

এখনও অবধি সমস্ত সমাধানগুলির মধ্যে, ইনলাইন ফাংশনটি সবচেয়ে মার্জিত এবং সরাসরি এগিয়ে দেখায়। যে কোনও কিছুর জন্য নজর রাখা উচিত?

— সূর্যশঙ্কর

Answer 6

&& + কোড-স্টাইল + ছোট উপাদান

এই সাধারণ পরীক্ষার বাক্য গঠন + কোড-স্টাইলের কনভেনশন + ছোট ফোকাসযুক্ত উপাদানগুলি আমার পক্ষে ওখানে সবচেয়ে পঠনযোগ্য বিকল্প। আপনি শুধু বিশেষ যত্ন নিতে এর falsy মান পছন্দ প্রয়োজন false, 0বা ""।

render: function() {
    var person= ...; 
    var counter= ...; 
    return (
       <div className="component">
          {person && (
            <Person person={person}/>
          )}
          {(typeof counter !== 'undefined') && (
            <Counter value={counter}/>
          )}
       </div>
    );
}

স্বীকৃতি না

ES7 পর্যায় -0 স্বরলিপি বাক্য গঠনটিও খুব দুর্দান্ত এবং আমার আইডিই সঠিকভাবে সমর্থন করলে আমি অবশ্যই এটি ব্যবহার করব:

const Users = ({users}) => (
  <div>
    {users.map(user =>
      <User key={user.id} user={user}/>
    )}
  </div>
)  

const UserList = ({users}) => do {
  if (!users) <div>Loading</div>
  else if (!users.length) <div>Empty</div>
  else <Users users={users}/>
}

---

আরও বিশদ এখানে: প্রতিক্রিয়া - একটি "যদি" উপাদান তৈরি করা হচ্ছে ... একটি ভাল ধারণা?

Comments

নিখরচায় অ-বেসিক তথ্য: প্রথমটি বলা হয়short-circuit syntax

— এস্পেপড্রা'

@Deerloper আমি মধ্যে পার্থক্য অনুমান && এবং & প্রথম জিনিস আমরা কম্পিউটার স্কুলে শিখতে এক, তবে কিছু লোক তাই এটি একটি খারাপ ধারণা আরো ব্যাখ্যা দিতে না তা জানেন না: en.wikipedia.org/wiki/Short-circuit_evaluation

— সেবাস্তিয়ান লরবার

সত্য, তবে তারা এটিকে ক্লাসিক শর্তাধীন বিবৃতিগুলির অংশ হিসাবে শেখায়। একটি প্রতিক্রিয়া উপাদান রেন্ডার করতে শর্ট সার্কিট ব্যবহার করতে গিয়ে আমি অনেক লোককে বিভ্রান্ত পেয়েছি;)

— স্লোপেডা

Answer 7

সরল, একটি ফাংশন তৈরি করুন।

renderBanner: function() {
  if (!this.state.banner) return;
  return (
    <div id="banner">{this.state.banner}</div>
  );
},

render: function () {
  return (
    <div id="page">
      {this.renderBanner()}
      <div id="other-content">
        blah blah blah...
      </div>
    </div>
  );
}

এটি ব্যক্তিগতভাবে আমি সর্বদা অনুসরণ করি pattern কোডটিকে সত্যই পরিষ্কার এবং সহজে বোঝা যায়। আরও বেশি কী এটি এটি আপনাকে Bannerতার নিজের উপাদানগুলিতে রিফ্যাক্টর অনুমতি দেয় যদি এটি খুব বেশি বড় হয়ে যায় (বা অন্য জায়গায় পুনরায় ব্যবহৃত হয়)।

Answer 8

পরীক্ষামূলক ES7 doসিনট্যাক্স এটিকে সহজ করে তোলে। আপনি যদি ব্যাবেল ব্যবহার করছেন তবে es7.doExpressionsবৈশিষ্ট্যটি সক্ষম করুন :

render() {
  return (
    <div id="banner">
      {do {
        if (this.state.banner) {
          this.state.banner;
        } else {
          "Something else";
        }
      }}
    </div>
  );
}

Http://wiki.ecmascript.org/doku.php?id=strawman:do_expressiontions দেখুন

Answer 9

ইতিমধ্যে উত্তরে উল্লিখিত হিসাবে, জেএসএক্স আপনাকে দুটি বিকল্পের সাথে উপস্থাপন করে

• টার্নারি অপারেটর

  { this.state.price ? <div>{this.state.price}</div> : null }

• যৌক্তিক সংমিশ্রণ

  { this.state.price && <div>{this.state.price}</div> }

---

যাইহোক, যারা তাদের জন্য কাজ করে না price == 0 ।

জেএসএক্স প্রথম ক্ষেত্রে মিথ্যা শাখা রেন্ডার করবে এবং যৌক্তিক সংমিশ্রণের ক্ষেত্রে কোনও কিছুই রেন্ডার হবে না। সম্পত্তি 0 হতে পারে, আপনার জেএসএক্সের বাইরের বিবৃতি থাকলে কেবল ব্যবহার করুন।

Comments

এটি কোনও জেএসএক্স সমস্যা নয়। এটি শর্ত নিজেই, এমনকি সাধারণ জেএসেও একই আচরণ করবে। আপনি যদি কোনও নম্বর চান তবে কেবল typeof(this.state.price) === "number"শর্ত হিসাবে ব্যবহার করুন (উভয় প্রকারে)।

— Kroltan

Answer 10

"যদি" শাখার ভিতরে আপনার একাধিক উপাদান থাকে তখন এই উপাদানটি কাজ করে:

var Display = React.createClass({
  render: function () {
    if (!this.props.when) {
      return false;
    }
    return React.DOM.div(null, this.props.children);
  },
});

ব্যবহার:

render: function() {
  return (
    <div>
      <Display when={this.state.loading}>
        Loading something...
        <div>Elem1</div>
        <div>Elem2</div>
      </Display>
      <Display when={!this.state.loading}>
        Loaded
        <div>Elem3</div>
        <div>Elem4</div>
      </Display>
    </div>
  );
}

PS কেউ মনে করেন যে এই উপাদানগুলি কোড পাঠের জন্য ভাল নয়। তবে আমার মনে, জাভাস্ক্রিপ্ট সহ এইচটিএমএল আরও খারাপ

Comments

যদি এখানে উত্তর দেওয়া হয় তবে এটি প্রদর্শিত না হলেও এটি এখনও মিথ্যা শর্তটি কার্যকর করবে।

— কেগান 82

Answer 11

বেশিরভাগ উদাহরণগুলি "এইচটিএমএল" এর এক লাইনের সাথে থাকে যা শর্তাধীনভাবে রেন্ডার করা হয়। শর্তাধীনভাবে রেন্ডার করা দরকার এমন একাধিক লাইন থাকলে এটি আমার পক্ষে পঠনযোগ্য বলে মনে হয়।

render: function() {
  // This will be renered only if showContent prop is true
  var content = 
    <div>
      <p>something here</p>
      <p>more here</p>
      <p>and more here</p>
    </div>;

  return (
    <div>
      <h1>Some title</h1>

      {this.props.showContent ? content : null}
    </div>
  );
}

প্রথম উদাহরণটি ভাল কারণ nullআমরা পরিবর্তে শর্তাধীন কিছু অন্যান্য সামগ্রী যেমন রেন্ডার করতে পারি{this.props.showContent ? content : otherContent}

তবে আপনার যদি কেবল কন্টেন্টটি দেখানোর / আড়াল করার দরকার হয় তবে এটি বুলিয়ান, নাল এবং অপরিজ্ঞাত উপেক্ষা করা থেকে আরও ভাল is

render: function() {
  return (
    <div>
      <h1>Some title</h1>

      // This will be renered only if showContent prop is true
      {this.props.showContent &&
        <div>
          <p>something here</p>
          <p>more here</p>
          <p>and more here</p>
        </div>
      }
    </div>
  );
}

Answer 12

প্রতিক্রিয়াটির জন্য যদি উপাদানটি থাকে তবে আরও একটি সমাধান রয়েছে :

var Node = require('react-if-comp');
...
render: function() {
    return (
        <div id="page">
            <Node if={this.state.banner}
                  then={<div id="banner">{this.state.banner}</div>} />
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

Answer 13

আমি আরও স্পষ্ট শর্টকাট ব্যবহার করি: তাত্ক্ষণিকভাবে আমন্ত্রিত ফাংশন এক্সপ্রেশন (IIFE):

{(() => {
  if (isEmpty(routine.queries)) {
    return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
  } else if (this.state.configured) {
    return <DeviceList devices={devices} routine={routine} configure={() => this.setState({configured: false})}/>
  } else {
    return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
  }
})()}

Answer 14

এটিকে কিছুটা সহজ করার জন্য আমি https://www.npmjs.com/package/jsx-control-statements তৈরি করেছি , মূলত এটি আপনাকে <If>শর্ত হিসাবে ট্যাগ হিসাবে সংজ্ঞায়িত করতে দেয় এবং তারপরে সেগুলি টেরিনারি আইএফগুলিতে সংকলিত করে যাতে <If>একমাত্র অভ্যন্তরের কোডটি পায় শর্তটি সত্য হলে মৃত্যুদন্ড কার্যকর করা।

Answer 15

সত্যিই পরিষ্কার একটি লাইন সংস্করণও রয়েছে ... {this.prop.product.title || "কোনো শিরোনাম নেই" }

অর্থাৎ,

render: function() {
            return (
                <div className="title">
                    { this.props.product.title || "No Title" }
                </div>
            );
        }

Comments

ওটা কি আমার উপরে নমুনা দিয়ে কাজ করে? ব্যানার প্রোপ না থাকলে যেখানে ব্যানার ডিভি উপস্থিত হবে না?

— জ্যাক অ্যালান

Answer 16

আমি প্রাক্কলনকারী পাস হলেই নিরাপদে উপাদানগুলি রেন্ডার করতে সম্প্রতি https://github.com/ajwhite/render-if তৈরি করেছি ।

{renderIf(1 + 1 === 2)(
  <span>Hello!</span>
)}

অথবা

const ifUniverseIsWorking = renderIf(1 + 1 === 2);

//...

{ifUniverseIsWorking(
  <span>Hello!</span>
)}

Answer 17

আপনি শর্তসাপেক্ষে টের্নারি অপারেটর ব্যবহার করে উপাদানগুলি অন্তর্ভুক্ত করতে পারেন:

render: function(){

         return <div id="page">

                  //conditional statement
                  {this.state.banner ? <div id="banner">{this.state.banner}</div> : null}

                  <div id="other-content">
                      blah blah blah...
                  </div>

               </div>
}

Answer 18

আপনি একটি ফাংশন ব্যবহার করতে পারেন এবং উপাদানটি ফিরে আসতে পারেন এবং রেন্ডার ফাংশনটি পাতলা রাখতে পারেন

class App extends React.Component {
  constructor (props) {
    super(props);
    this._renderAppBar = this._renderAppBar.bind(this);
  }

  render () {
    return <div>
      {_renderAppBar()}

      <div>Content</div>

    </div>
  }

  _renderAppBar () {
    if (this.state.renderAppBar) {
      return <AppBar />
    }
  }
}

Answer 19

ES6 ব্যবহার করে আমার পদ্ধতিটি এখানে।

import React, { Component } from 'react';
// you should use ReactDOM.render instad of React.renderComponent
import ReactDOM from 'react-dom';

class ToggleBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // toggle box is closed initially
      opened: false,
    };
    // http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html
    this.toggleBox = this.toggleBox.bind(this);
  }

  toggleBox() {
    // check if box is currently opened
    const { opened } = this.state;
    this.setState({
      // toggle value of `opened`
      opened: !opened,
    });
  }

  render() {
    const { title, children } = this.props;
    const { opened } = this.state;
    return (
      <div className="box">
        <div className="boxTitle" onClick={this.toggleBox}>
          {title}
        </div>
        {opened && children && (
          <div class="boxContent">
            {children}
          </div>
        )}
      </div>
    );
  }
}

ReactDOM.render((
  <ToggleBox title="Click me">
    <div>Some content</div>
  </ToggleBox>
), document.getElementById('app'));

ডেমো: http://jsfiddle.net/kb3gN/16688/

আমি কোড ব্যবহার করছি:

{opened && <SomeElement />}

এটি সত্য SomeElementহলেই রেন্ডার হবে opened। এটি জাভাস্ক্রিপ্ট যেভাবে যৌক্তিক পরিস্থিতিতে সমাধান করে তার কারণেই এটি কাজ করে:

true && true && 2; // will output 2
true && false && 2; // will output false
true && 'some string'; // will output 'some string'
opened && <SomeElement />; // will output SomeElement if `opened` is true, will output false otherwise

হিসাবে Reactউপেক্ষা করা হবে false, আমি শর্তাধীন কিছু উপাদান রেন্ডার করতে খুব ভাল উপায় এটি খুঁজে।

Answer 20

হয়তো এটি এমন কাউকে সহায়তা করে যা এই প্রশ্নটি নিয়ে আসে: প্রতিক্রিয়াতে সমস্ত শর্তাধীন রেন্ডারিংস সমস্ত শর্তাধীন রেন্ডারিং এটি প্রতিক্রিয়ায় শর্তাধীন রেন্ডারিংয়ের জন্য বিভিন্ন বিকল্পের একটি নিবন্ধ

কোন শর্তসাপেক্ষ রেন্ডারিং কখন ব্যবহার করবেন তার মূল টেকওয়েস:

** অন্যথায় যদি

• সর্বাধিক প্রাথমিক শর্তাধীন রেন্ডারিং ering
• শিক্ষানবিস বন্ধুত্বপূর্ণ
• নাল ফিরিয়ে দিয়ে রেন্ডার পদ্ধতি থেকে আউট-আউট করতে হলে ব্যবহার করুন use

** টেরিনারি অপারেটর

• এটি যদি অন্য-বিবৃতিতে ব্যবহার করুন
• এটি যদি-অন্যর চেয়ে বেশি সংক্ষিপ্ত হয়

** লজিকাল অ্যান্ড অ্যান্ড অপারেটর

• এটি ব্যবহার করুন যখন ত্রৈমাসিক ক্রিয়াকলাপের একপাশে শূন্য ফিরে আসবে

** সুইচ কেস

• বাগাড়ম্বরপূর্ণ
• কেবল স্ব-আমন্ত্রণমূলক ক্রিয়াকলাপের সাথে যুক্ত হতে পারে
• এটি এড়ান, পরিবর্তে এনাম ব্যবহার করুন

** enums

• বিভিন্ন রাজ্যের মানচিত্রের জন্য উপযুক্ত
• একাধিক শর্ত মানচিত্রের জন্য নিখুঁত

** মাল্টি-লেভেল / নেস্টেড শর্তাধীন রেন্ডারিংস

• পড়ার যোগ্যতার জন্য এগুলি এড়িয়ে চলুন
• উপাদানগুলিকে তাদের নিজস্ব সাধারণ শর্তাধীন রেন্ডারিং দিয়ে আরও বেশি হালকা ওজনের উপাদানগুলিতে বিভক্ত করুন
• এইচওসি ব্যবহার করুন

** এইচওসি

• শর্তাধীন রেন্ডারিংকে রক্ষা করতে এগুলি ব্যবহার করুন
• উপাদানগুলি তাদের মূল উদ্দেশ্যে ফোকাস করতে পারে

** বাহ্যিক টেম্প্লেটিং উপাদান

• এগুলি এড়িয়ে চলুন এবং জেএসএক্স এবং জাভাস্ক্রিপ্টের সাথে স্বাচ্ছন্দ্য বোধ করবেন

Answer 21

ES6 এর সাহায্যে আপনি এটি একটি সাধারণ ওলাইনার দিয়ে করতে পারেন

const If = ({children, show}) => show ? children : null

"শো" হ'ল বুলিয়ান এবং আপনি এই ক্লাসটি ব্যবহার করে

<If show={true}> Will show </If>
<If show={false}> WON'T show </div> </If>

Comments

খারাপ। এটি সর্বদা গণনা করা হবে।

— কিওয়ারটি

Answer 22

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

render: function () {
    return (
        <div id="page">
            {this.state.banner ? <div id="banner">{this.state.banner}</div> : ''}
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

<script src="http://dragon.ak.fbcdn.net/hphotos-ak-xpf1/t39.3284-6/10574688_1565081647062540_1607884640_n.js"></script>
<script src="http://dragon.ak.fbcdn.net/hphotos-ak-xpa1/t39.3284-6/10541015_309770302547476_509859315_n.js"></script>
<script type="text/jsx;harmony=true">void function() { "use strict";

var Hello = React.createClass({
  render: function() {
    return (
      <div id="page">
        {this.props.banner ? <div id="banner">{this.props.banner}</div> : ''}
        <div id="other-content">
          blah blah blah...
        </div>
      </div>
    );   
  }
});

var element = <div><Hello /><Hello banner="banner"/></div>;
React.render(element, document.body);

}()</script>

Answer 23

আমি অবিলম্বে-প্রার্থনা ফাংশন প্রকাশ (explicitness মত IIFE) এবং if-elseউপর render callbacksএবং ternary operators।

render() {
  return (
    <div id="page">
      {(() => (
        const { banner } = this.state;
        if (banner) {
          return (
            <div id="banner">{banner}</div>
          );
        }
        // Default
        return (
          <div>???</div>
        );
      ))()}
      <div id="other-content">
        blah blah blah...
      </div>
    </div>
  );
}

আপনার কেবল IIFEসিনট্যাক্সটি সম্পর্কে পরিচিত হওয়া দরকার , {expression}এটি স্বাভাবিক প্রতিক্রিয়া সিনট্যাক্স, এর ভিতরে কেবল বিবেচনা করুন যে আপনি কোনও ফাংশন লিখছেন যা নিজেই প্রার্থনা করছে।

function() {

}()

যে পেরেন ভিতরে আবৃত করা প্রয়োজন

(function() {

}())

Answer 24

শর্তসাপেক্ষে একটি উপাদান রেন্ডার করতে রেন্ডার প্রপস ব্যবহার করার একটি প্রযুক্তিও রয়েছে । এটির সুবিধাটি হ'ল শর্তটি পূরণ না হওয়া পর্যন্ত রেন্ডার মূল্যায়ন করবে না, ফলস্বরূপ নাল এবং অপরিজ্ঞাত মানগুলির জন্য কোনও উদ্বেগের ফলস্বরূপ ।

const Conditional = ({ condition, render }) => {
  if (condition) {
    return render();
  }
  return null;
};

class App extends React.Component {
  constructor() {
    super();
    this.state = { items: null }
  }

  componentWillMount() {
    setTimeout(() => { this.setState({ items: [1,2] }) }, 2000);
  }

  render() {
    return (
      <Conditional
        condition={!!this.state.items}
        render={() => (
          <div>
            {this.state.items.map(value => <p>{value}</p>)}
          </div>
        )}
      />
    )
  }
}

Answer 25

উত্তীর্ণ শর্তটি যদি পূর্ণ হয় তবে কেবল কিছু সরবরাহ করতে হয়, আপনি সিনট্যাক্স ব্যবহার করতে পারেন:

{ condition && what_to_render }

এই পদ্ধতিতে কোডটি দেখতে এরকম হবে:

render() {
    const { banner } = this.state;
    return (
        <div id="page">
            { banner && <div id="banner">{banner}</div> }
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

এটি করার জন্য অন্যান্য বৈধ উপায় অবশ্যই রয়েছে, এটি সমস্ত পছন্দ এবং উপলক্ষ্য। আপনি যদি আগ্রহী হন তবে এই নিবন্ধে প্রতিক্রিয়াতে কীভাবে শর্তযুক্ত রেন্ডারিং করবেন সে সম্পর্কে আপনি আরও উপায় শিখতে পারেন !

Answer 26

কেবলমাত্র অন্য একটি বিকল্প যুক্ত করার জন্য - আপনি যদি কফি-স্ক্রিপ্ট পছন্দ করেন / সহ্য করেন তবে আপনি আপনার জেএসএক্স লিখতে কফি-প্রতিক্রিয়া ব্যবহার করতে পারেন যদি / অন্য বিবৃতিগুলি কফি-স্ক্রিপ্টে প্রকাশের মতো এবং বিবৃতি নয় তবে:

render: ->
  <div className="container">
    {
      if something
        <h2>Coffeescript is magic!</h2>
      else
        <h2>Coffeescript sucks!</h2>
    }
  </div>  

Answer 27

কেবলমাত্র জ্যাক অ্যালান ডক্স সম্পর্কিত উল্লেখ সহ উত্তর প্রসারিত করতে।

মৌলিক প্রতিক্রিয়া (দ্রুত শুরু) ডকুমেন্টেশন null যেমন ক্ষেত্রে পরামর্শ দেয় । তবে উন্নত গাইডে উল্লিখিত বুলিয়ানস, নুল এবং অপরিজ্ঞাত পাশাপাশি উপেক্ষা করা হয়।

Comments

পরিষ্কার করার জন্য সংশোধন করা হয়েছে - মিথ্যা, নাল, অপরিজ্ঞাত এবং সত্য পাশাপাশি উপেক্ষা করা বৈধ - ফেসবুক . github.io/react/docs/… । যদিও, কুইক স্টার্টে তারা পরামর্শ বাতিল করতে পছন্দ করে।

— ওলেগ ভি।