প্রতিক্রিয়া রেন্ডার কার্যক্রমে খালি ফিরে আসা কি সম্ভব?

Question

আমার একটি বিজ্ঞপ্তি উপাদান রয়েছে এবং এর জন্য আমার একটি টাইমআউট সেট আছে। সময় শেষ হওয়ার পরে আমি কল this.setState({isTimeout:true})।

ইতিমধ্যে সময়সীমা শেষ হলে আমি যা করতে চাই তা হ'ল আমি কিছুই রেন্ডার করতে চাই না:

  render() {
    let finalClasses = "" + (this.state.classes || "");
    if (isTimeout){
      return (); // here has some syntax error
    }
    return (<div>{this.props.children}</div>);
  }

সমস্যাটি হ'ল: রিটার্ন (); // এখানে কিছু সিনট্যাক্স ত্রুটি রয়েছে

Answer 1

হ্যাঁ আপনি পারবেন, তবে ফাঁকা পরিবর্তে, nullআপনি যদি renderউপাদান থেকে কোনও কিছু না চান তবে কেবল ফিরে যান :

return (null);

---

আর একটি গুরুত্বপূর্ণ বিষয় হ'ল, জেএসএক্সের অভ্যন্তরে যদি আপনি শর্তাধীন উপাদান রেন্ডার করে থাকেন তবে তার ক্ষেত্রে condition=false, আপনি এই মানগুলির কোনওটি ফিরিয়ে দিতে পারেন false, null, undefined, true। অনুযায়ী সমবায় :

booleans (true/false), null, and undefinedহয় বৈধ সন্তান , তারা মানে তারা কেবল রেন্ডার না উপেক্ষা করা হবে।

এই সমস্ত JSXএক্সপ্রেশন একই জিনিস রেন্ডার হবে:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

উদাহরণ:

শুধুমাত্র বিজোড় মানগুলি রেন্ডার হবে, কারণ এমনকি মানগুলির জন্য আমরা ফিরে আসছি null।

const App = ({ number }) => {
  if(number%2) {
    return (
      <div>
        Number: {number}
      </div>
    )
  }
  
  return (null);           //===> notice here, returning null for even values
}

const data = [1,2,3,4,5,6];

ReactDOM.render(
  <div>
    {data.map(el => <App key={el} number={el} />)}
  </div>,
  document.getElementById('app')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app' />

Comments

আপনি কেন নালার দিকে ফিরে যাচ্ছেন?

— ওয়েডারার

@ ওয়েদারার মধ্যে কোনও পার্থক্য নেই return nullএবং return (null)তারা একই রকম :)

— মায়াঙ্ক শুক্ল

তবে উপায়, আপনি কেবল আপনার ক্রিয়াকলাপটি বাদ দিতে পারবেন না (যা অপরিশোধিত প্রত্যাবর্তনের সমান)। আপনার যদি কিছু না থাকে returnতবে প্রতিক্রিয়া একটি ত্রুটি দেয়। সুতরাং return nullপ্রয়োজনীয়।

— জন হেন্কেল

Answer 2

কিছু উত্তর কিছুটা ভুল এবং ডক্সের ভুল অংশটি নির্দেশ করে:

আপনি যদি একটি কম্পোনেন্ট কিছুই রেন্ডার করতে চান তাহলে, শুধু ফিরে nullঅনুযায়ী, ডক :

বিরল ক্ষেত্রে আপনি কোনও উপাদান নিজেকে লুকিয়ে রাখতে চাইতে পারেন যদিও এটি অন্য উপাদান দ্বারা রেন্ডার করা হয়েছিল। এই রিটার্নটি রেন্ডার আউটপুট পরিবর্তে নালার করতে।

আপনি undefinedউদাহরণস্বরূপ ফিরে আসতে চেষ্টা করলে , আপনি নিম্নলিখিত ত্রুটি পাবেন:

রেন্ডার থেকে কিছুই ফেরানো হয়নি। এর অর্থ সাধারণত একটি রিটার্নের বিবৃতি অনুপস্থিত। বা, কিছুই রেন্ডার করতে, নাল ফিরে।

হিসাবে অন্যান্য উত্তর সেই বিষয়টিই তুলে ধরেছিলেন, null, true, falseএবং undefinedবৈধ সন্তান যা শর্তসাপেক্ষ রেন্ডারিং জন্য দরকারী হয় ভিতরে / কিছুই রেন্ডার, ঠিক ফিরে আপনার jsx, তবে এটি আপনাকে লুকিয়ে রাখবেন তা আপনার কম্পোনেন্ট চান null।

Answer 3

হ্যাঁ আপনি একটি প্রতিক্রিয়া রেন্ডার পদ্ধতি থেকে খালি মূল্য ফেরত দিতে পারেন।

আপনি নিম্নলিখিত যেকোনটি ফিরিয়ে দিতে পারেন: false, null, undefined, or true

ডক্স অনুসারে :

false, null, undefined, এবং trueবৈধ শিশু। তারা কেবল রেন্ডার করে না।

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

return null; or
return false; or
return true; or
return undefined; 

যাইহোক return nullএটি সর্বাধিক পছন্দসই কারণ এটি প্রতীয়মান করে যে কিছুই ফিরিয়ে দেওয়া হয়নি

Comments

প্রত্যাবর্তিত অপরিবর্তিত ভুল। এটি ত্রুটি ফিরে আসবে। পরিবর্তে <ডিভ> ef অপরিজ্ঞাত} </div> সঠিক উপায় right

— জয় ধাওয়ান

Answer 4

সামান্যভাবে অফ-টপিক তবে আপনার যদি এমন কোনও শ্রেণিভিত্তিক উপাদান প্রয়োজন হয় যা কখনই কোনও কিছু সরবরাহ করে না এবং আপনি কিছু-এখনও মান-নির্ধারিত ES বাক্য গঠন ব্যবহার করতে খুশি হন তবে আপনি যেতে চাইবেন:

render = () => null

এটি মূলত একটি তীর পদ্ধতি যা বর্তমানে ট্রান্সফর্ম-শ্রেণি-বৈশিষ্ট্য বাবেল প্লাগইন প্রয়োজন। প্রতিক্রিয়া আপনাকে renderফাংশন ব্যতীত কোনও উপাদানকে সংজ্ঞায়িত করতে দেয় না এবং এটি বিবেচনা করতে পারি এই প্রয়োজনীয়তাকে সন্তুষ্ট করার জন্য এটিই সবচেয়ে সংক্ষিপ্ত রূপ।

আমি বর্তমানে এই কৌশলটি ডকুমেন্টেশন থেকে ধার করা স্ক্রোলটোপ টপের একটি ভেরিয়েন্টে ব্যবহার করছি react-router। আমার ক্ষেত্রে, উপাদানটির কেবলমাত্র একক উদাহরণ রয়েছে এবং এটি কোনও কিছুই রেন্ডার করে না, সুতরাং "রেন্ডার নাল" একটি সংক্ষিপ্ত রূপটি সেখানে খুব ভাল ফিট করে।

Comments

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

— জিন

Answer 5

আমরা এভাবে ফিরে আসতে পারি,

return <React.Fragment />;

Comments

এই ফিরে আসার চেয়ে ভাল নাকি খারাপ null?

— স্ট্রাইডার

@ বিটস্ট্রাইডার শূন্যতার পরিবর্তে ফ্রেগমেন্ট ব্যবহার করে স্মৃতিশক্তি হারাতে শুরু করে।

— koo

এই উত্তরটি কেন

— হ্রাস করা হয়েছে

Answer 6

রেন্ডার () ফাংশনে মিথ্যা মানটি ফিরিয়ে দেওয়া কিছুই রেন্ডার করবে না। সুতরাং আপনি ঠিক করতে পারেন

 render() {
    let finalClasses = "" + (this.state.classes || "");
    return !isTimeout && <div>{this.props.children}</div>;
  }