প্রতিক্রিয়া উপাদানটির মধ্যে কীভাবে সুইচ স্টেটমেন্ট ব্যবহার করবেন?

Question 1

আমার একটি প্রতিক্রিয়া উপাদান রয়েছে, এবং উপাদানটির renderপদ্ধতির ভিতরে আমার এই জাতীয় কিছু রয়েছে:

render() {
    return (
        <div>
            <div>
                // removed for brevity
            </div>

           { switch(...) {} }

            <div>
                // removed for brevity
            </div>
        </div>
    );
}

এখন মুল বক্তব্যটি হ'ল আমার দুটি divউপাদান রয়েছে, একটি শীর্ষে এবং নীচে একটি, যা স্থির। মাঝখানে আমি একটি স্যুইচ স্টেটমেন্ট চাই এবং আমার রাজ্যের মান অনুসারে আমি একটি আলাদা উপাদান রেন্ডার করতে চাই। সুতরাং মূলত, আমি চাই দুটি divউপাদান সর্বদা স্থির হয় এবং মাঝখানে কেবল প্রতিটি সময় একটি আলাদা উপাদান রেন্ডার করা হয়। আমি একাধিক-পদক্ষেপ প্রদানের প্রক্রিয়াটি প্রয়োগ করতে এটি ব্যবহার করছি)। যদিও কোডটি বর্তমানে এটি কাজ করে না, এটি আমাকে একটি ত্রুটি দেয় switchযা অপ্রত্যাশিত। কোন ধারণা কীভাবে আমি চাই তা অর্জন করতে পারি?

Question 2

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

renderSwitch(param) {
  switch(param) {
    case 'foo':
      return 'bar';
    default:
      return 'foo';
  }
}

render() {
  return (
    <div>
      <div>
          // removed for brevity
      </div>
      {this.renderSwitch(param)}
      <div>
          // removed for brevity
      </div>
    </div>
  );
}

স্নিপেট প্রসারিত করুন

Question 3

অন্যান্য উত্তরের বিপরীতে, আমি রেন্ডার ফাংশনে "সুইচ" ইনলাইন করতে পছন্দ করব prefer এটি আরও স্পষ্ট করে তোলে যে পদগুলিতে কোন উপাদানগুলি রেন্ডার করা যেতে পারে। আপনি সরল পুরানো জাভাস্ক্রিপ্ট অবজেক্টটি ব্যবহার করে একটি স্যুইচের মতো অভিব্যক্তিটি প্রয়োগ করতে পারেন:

render () {
  return (
    <div>
      <div>
        {/* removed for brevity */}
      </div>
      {
        {
          'foo': <Foo />,
          'bar': <Bar />
        }[param]
      }
      <div>
        {/* removed for brevity */}
      </div>
    </div>
  )
}

Question 4

এটি ঘটছে, কারণ switchবিবৃতিটি একটি statement, তবে এখানে জাভাস্ক্রিপ্ট একটি অভিব্যক্তি প্রত্যাশা করে।

যদিও, কোনও renderপদ্ধতিতে স্যুইচ স্টেটমেন্ট ব্যবহার করার পরামর্শ দেওয়া হয়নি , আপনি এটি অর্জন করতে স্ব-আমন্ত্রণমূলক ফাংশনটি ব্যবহার করতে পারেন:

render() {
    // Don't forget to return a value in a switch statement
    return (
        <div>
            {(() => {
                switch(...) {}
            })()}
        </div>
    );
}

Question 5

আমি এটি রেন্ডার () পদ্ধতির অভ্যন্তরে করেছি:

  render() {
    const project = () => {
      switch(this.projectName) {

        case "one":   return <ComponentA />;
        case "two":   return <ComponentB />;
        case "three": return <ComponentC />;
        case "four":  return <ComponentD />;

        default:      return <h1>No project match</h1>
      }
    }

    return (
      <div>{ project() }</div>
    )
  }

আমি রেন্ডার () রিটার্নটি পরিষ্কার রাখার চেষ্টা করেছি, তাই আমি আমার যুক্তিটি ঠিক উপরে 'কনস্ট' ফাংশনে রেখেছি। এইভাবে আমি আমার স্যুইচ কেসগুলি খুব সুন্দরভাবে ইনডেন্ট করতে পারি।

Question 6

লঙ্কানের উত্তর একটি দুর্দান্ত সমাধান।

<div>
  {{ beep: <div>Beep</div>,
     boop: <div>Boop</div>
  }[greeting]}
</div>

আপনার যদি কোনও ডিফল্ট মান প্রয়োজন হয় তবে আপনি এটি করতেও পারেন

<div>
  {{ beep: <div>Beep</div>,
     boop: <div>Boop</div>
  }[greeting] || <div>Hello world</div>}
</div>

বিকল্পভাবে, যদি এটি আপনার কাছে ভাল না পড়ে তবে আপনি এর মতো কিছু করতে পারেন

<div>
  { 
    rswitch(greeting, {
      beep: <div>Beep</div>,
      boop: <div>Boop</div>,
      default: <div>Hello world</div>
    }) 
  }
</div>

সঙ্গে

function rswitch (param, cases) {
  if (cases[param]) {
    return cases[param]
  } else {
    return cases.default
  }
}

Question 7

শর্তসাপেক্ষ অপারেটর ব্যবহার করে রেন্ডার ব্লকে এক ধরণের সুইচ উপস্থাপন করার একটি উপায় :

{(someVar === 1 &&
    <SomeContent/>)
|| (someVar === 2 &&
    <SomeOtherContent />)
|| (this.props.someProp === "something" &&
    <YetSomeOtherContent />)
|| (this.props.someProp === "foo" && this.props.someOtherProp === "bar" &&
    <OtherContentAgain />)
||
    <SomeDefaultContent />
}

এটি নিশ্চিত করা উচিত যে শর্তগুলি কঠোরভাবে একটি বুলিয়ান ফিরিয়ে দেয়।

Question 8

আমি বর্তমানের উত্তরগুলির কোনওরও বড় অনুরাগী নই, কারণ সেগুলি হয় খুব ভার্জোজ, বা কী চলছে তা বোঝার জন্য আপনার কোডের চারপাশে ঝাঁপিয়ে পড়ার প্রয়োজন।

আমি এটি তৈরি করে আরও বেশি উপাদান কেন্দ্রিক উপায়ে প্রতিক্রিয়া জানাতে পছন্দ করি <Switch/>। এই উপাদানটির কাজটি একটি প্রপ নেওয়া এবং কেবল তাদের বাচ্চাদের রেন্ডার করা উচিত যাদের সন্তানের প্রপ এই সাথে মেলে। সুতরাং নীচের উদাহরণে আমি testস্যুইচটিতে একটি প্রপ তৈরি করেছি , এবং এটি valueবাচ্চাদের একটি উত্সের সাথে তুলনা করেছি , কেবল এটির সাথে মিলেছে।

উদাহরণ:

const Switch = props => {
  const { test, children } = props
  // filter out only children with a matching prop
  return children.find(child => {
    return child.props.value === test
  })      
}

const Sample = props => {
  const someTest = true
  return (
    <Switch test={someTest}>
      <div value={false}>Will display if someTest is false</div>
      <div value={true}>Will display if someTest is true</div>
    </Switch>
  )
}

ReactDOM.render(
  <Sample/>,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

স্নিপেট প্রসারিত করুন

আপনি স্যুইচটিকে যতটা সহজ বা আপনার পছন্দ মতো জটিল করতে পারেন। বাচ্চাদের এবং তাদের মান প্রপসগুলির আরও দৃ prop় চেকিং করতে ভুলবেন না।

Question 9

কেমন:

mySwitchFunction = (param) => {
   switch (param) {
      case 'A':
         return ([
            <div />,
         ]);
      // etc...
   }
}
render() {
    return (
       <div>
          <div>
               // removed for brevity
          </div>

          { this.mySwitchFunction(param) }

          <div>
              // removed for brevity
          </div>
      </div>
   );
}

Question 10

আপনি এরকম কিছু করতে পারেন।

 <div>
          { object.map((item, index) => this.getComponent(item, index)) }
 </div>

getComponent(item, index) {
    switch (item.type) {
      case '1':
        return <Comp1/>
      case '2':
        return <Comp2/>
      case '3':
        return <Comp3 />
    }
  }

Question 11

রেন্ডারে আপনার কোনও সুইচ থাকতে পারে না। কোনও উপাদানকে অ্যাক্সেস করে এমন কোনও অবজেক্ট-লিটারাল স্থাপনের স্যুইডো-স্যুইচ পদ্ধতিটি আদর্শ নয় কারণ এটি সমস্ত দৃষ্টিভঙ্গিকে প্রক্রিয়াজাত করে এবং এর ফলে সেই রাজ্যে বিদ্যমান না এমন প্রপসের নির্ভরতা ত্রুটি হতে পারে।

এটি করার জন্য একটি দুর্দান্ত পরিষ্কার উপায় এখানে প্রতিটি ভিউ আগেই রেন্ডার করার প্রয়োজন হয় না:

render () {
  const viewState = this.getViewState();

  return (
    <div>
      {viewState === ViewState.NO_RESULTS && this.renderNoResults()}
      {viewState === ViewState.LIST_RESULTS && this.renderResults()}
      {viewState === ViewState.SUCCESS_DONE && this.renderCompleted()}
    </div>
  )

যদি আপনার শর্তগুলির জন্য দর্শন রাজ্য কোনও সরল সম্পত্তির উপর ভিত্তি করে - যেমন প্রতি লাইনের একাধিক শর্ত, তবে getViewStateশর্তাবলী যুক্তিকে আলাদা করতে এবং আপনার রেন্ডারটিকে সাফ করার জন্য একটি এনাম এবং শর্তগুলি আবশ্যক করে ফাংশন।

Question 12

উপাদানগুলির মধ্যে স্যুইচ করতে বোতামটি ব্যবহার করে এখানে একটি সম্পূর্ণ কার্যকারী উদাহরণ

আপনি নিম্নলিখিত হিসাবে একটি নির্মাতা সেট করতে পারেন

constructor(props)
{
    super(props);
    this.state={
        currentView: ''
    }
}

তারপরে আপনি নিম্নলিখিত হিসাবে উপাদানগুলি রেন্ডার করতে পারেন

  render() 
{
    const switchView = () => {

    switch(this.state.currentView) 
    {

      case "settings":   return <h2>settings</h2>;
      case "dashboard":   return <h2>dashboard</h2>;

      default:      return <h2>dashboard</h2>
    }
  }

    return (

       <div>

            <button onClick={(e) => this.setState({currentView: "settings"})}>settings</button>
            <button onClick={(e) => this.setState({currentView: "dashboard"})}>dashboard</button>

            <div className="container">
                { switchView() }
            </div>


        </div>
    );
}

}

আপনি দেখতে পাচ্ছেন যে আমি রাষ্ট্রগুলির মধ্যে স্যুইচ করতে একটি বোতাম ব্যবহার করছি।

Question 13

আমি https://stackoverflow.com/a/60313570/770134 এ পরামর্শটি সত্যিই পছন্দ করেছি , তাই আমি এটিকে টাইপসক্রিপ্টে এর মতো করে ফেলেছি

import React, { FunctionComponent } from 'react'
import { Optional } from "typescript-optional";
const { ofNullable } = Optional

interface SwitchProps {
  test: string
  defaultComponent: JSX.Element
}

export const Switch: FunctionComponent<SwitchProps> = (props) => {
  return ofNullable(props.children)
    .map((children) => {
      return ofNullable((children as JSX.Element[]).find((child) => child.props['value'] === props.test))
        .orElse(props.defaultComponent)
    })
    .orElseThrow(() => new Error('Children are required for a switch component'))
}

const Foo = ({ value = "foo" }) => <div>foo</div>;
const Bar = ({ value = "bar" }) => <div>bar</div>;
const value = "foo";
const SwitchExample = <Switch test={value} defaultComponent={<div />}>
  <Foo />
  <Bar />
</Switch>;

Question 14

এটি অন্য পদ্ধতি।

render() {
   return {this[`renderStep${this.state.step}`]()}

renderStep0() { return 'step 0' }
renderStep1() { return 'step 1' }