ReactJS এ গতিশীল বৈশিষ্ট্য

Question 1

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

render: function() {
    var maybeDisabled = AppStore.cartIsEmpty() ? "disabled" : "";
    return <button {maybeDisabled}>Clear cart</button>
}

"{" চরিত্রের কারণে এটি একটি পার্স ত্রুটি ছুড়ে ফেলে। আমি কিভাবে AppStore.cartIsEmpty () এর (বুলিয়ান) ফলাফলের ভিত্তিতে অক্ষম বৈশিষ্ট্যকে অন্তর্ভুক্ত / বাদ দিতে পারি?

Question 2

Alচ্ছিক বৈশিষ্ট্যগুলি যুক্ত করার সর্বোত্তম উপায় ( disabledআপনি এবং অন্যরাও আপনি ব্যবহার করতে পারেন) বর্তমানে জেএসএক্স স্প্রেড অ্যাট্রিবিউট ব্যবহার করার জন্য রয়েছে :

var Hello = React.createClass({
    render: function() {
        var opts = {};
        if (this.props.disabled) {
            opts['disabled'] = 'disabled';
        }
        return <button {...opts}>Hello {this.props.name}</button>;
    }
});

React.render((<div><Hello name="Disabled" disabled='true' />
    <Hello name="Enabled"  />
</div>)
, document.getElementById('container'));

স্প্রেড অ্যাট্রিবিউটগুলি ব্যবহার করে, আপনি জাভাস্ক্রিপ্ট অবজেক্ট উদাহরণটি ব্যবহার করে যা যা চান তার পক্ষে গতিশীলভাবে যুক্ত (বা ওভাররাইড) করতে পারেন can উপরের আমার উদাহরণে, কোডটি একটি disabledকী তৈরি করে ( disabledএই ক্ষেত্রে একটি মান সহ ) যখন disabledসম্পত্তিটি Helloউপাদানটির উদাহরণে চলে যায়।

আপনি যদি কেবল ব্যবহার করতে চান disabledতবে এই উত্তরটি ভাল কাজ করে।

Question 3

আপনি disabledবৈশিষ্ট্যের কাছে একটি বুলিয়ান পাস করতে পারেন ।

render: function() {
    return <button disabled={AppStore.cartIsEmpty()}>Clear cart</button>
}

Question 4

আমি প্রতিক্রিয়া 16 ব্যবহার করছি এবং এটি আমার জন্য কাজ করে ( boolআপনার পরীক্ষাটি কোথায় ):

<fieldset {...(bool && {disabled:true})}>

মূলত, পরীক্ষার উপর ভিত্তি করে ( bool) আপনি শর্তসাপেক্ষ বৈশিষ্ট্য সহ কোনও বস্তুটি ফিরিয়ে দেন বা করেন না।

এছাড়াও, যদি আপনার একাধিক বৈশিষ্ট্য যুক্ত বা বাদ দিতে হয় তবে আপনি এটি করতে পারেন:

<fieldset {...(bool && {disabled:true, something:'123'})}>

পরিচালিত আরও বিস্তৃত বৈশিষ্ট্যের জন্য আমি আপনাকে জেএসএক্সের বাইরে থাকা বৈশিষ্ট্যগুলি (বা ছাড়া) অবজেক্টটি প্রিফ্যাব করার পরামর্শ দিচ্ছি।

Question 5

গতিশীল বৈশিষ্ট্যগুলি করার কোনও আরও পরিষ্কার উপায় যা কোনও বৈশিষ্ট্যের জন্য কাজ করে

function dynamicAttributes(attribute, value){
  var opts = {};
  if(typeof value !== 'undefined' && value !== null) {
    opts['"'+attribute+'"'] = value;
    return opts;
  }
  return false;
};

নীচের মত আপনার প্রতিক্রিয়া উপাদান কল

<ReactComponent {...dynamicAttributes("disabled",false)}
{...dynamicAttributes("data-url",dataURL)}
{...dynamicAttributes("data-modal",true)} />

পরামর্শ :

আপনার dynamicAttributesকোনও সাধারণ জায়গা / ইউটিলিটিগুলিতে ফাংশন থাকতে পারে এবং এটি সমস্ত উপাদান জুড়ে এটি ব্যবহার করতে আমদানি করতে পারে
আপনি nullগতিশীল বৈশিষ্ট্য রেন্ডার না হিসাবে মান পাস করতে পারে

Question 6

গৃহীত সমাধানের চেয়ে পরিচ্ছন্ন হ'ল সমাধানটি যা অনিলরেডশিফ্ট উল্লেখ করেছে, তবে আমি এর প্রসারিত করব।

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

disabled={disabled ? 'disabled' : undefined} সর্বাধিক সুস্পষ্ট সমাধান।

Question 7

আমি যে সংস্করণটি ব্যবহার করেছি তা হ'ল:

<button disabled={disabled ? 'disabled' : undefined}>
    Click me (or dont)
</button>

Question 8

আপনি ডকুমেন্টেশনে এ জাতীয় কিছু খুঁজে পেতে পারেন।

https://facebook.github.io/react/docs/transferences-props.html

আপনার ক্ষেত্রে এটি কিছু হতে পারে

function MyComponent(props) {
    let { disabled, ...attrs } = props;
    if (disabled) {
        // thus, it will has the disabled attribute only if it
        // is disabled
        attrs = {
            ...attrs,
            disabled: true
        }
    };

    return (
        <button {...attrs}>MyLabel</button>
    )
}

এই কোডটি ES6 ব্যবহার করছে, তবে আমি আপনাকে ধারণাটি পেয়েছি।

এটি দুর্দান্ত কারণ আপনি এই উপাদানটির সাথে আরও অনেকগুলি গুণাবলী পাস করতে পারেন এবং এটি এখনও কার্যকর হবে।

Question 9

এটি করার একটি সহজ এবং পরিষ্কার উপায়

<button {...disabled && {disabled: true}}>Clear cart</button>

প্রতিবন্ধীদের এই জাতীয় প্রপস থেকে আসা উচিত

<MyComponent disabled />

Question 10

প্রথমে আপনি খালি পরীক্ষা করতে পারেন

<button disabled={true}>Button 1</button>
<button disabled={false}>Button 2</button>

দ্রষ্টব্য: ** অক্ষম মান স্ট্রিং নয়, এটি বুলিয়ান হওয়া উচিত ।

এখন গতিশীল জন্য। আপনি সহজভাবে লিখতে পারেন

<button type="button" disabled={disable}  
        onClick={()=>this.setSelectValue('sms')} >{this.state.sms}</button>

আপনি দেখতে পাচ্ছেন যে আমি অক্ষম সম্পত্তি ব্যবহার করছি এবং কোঁকড়ানো বন্ধনীগুলিতে এটি স্থানীয় পরিবর্তনশীল / রাষ্ট্রের বর্ণ হতে পারে। পরিবর্তনশীল disableমান সত্য / মিথ্যা ধারণ করে।

Question 11

এটি কাজ করতে পারে, অক্ষমদের সাথে সমস্যা হ'ল এটির পক্ষে কেবল বুলেটিয়ান সেট করা যায় না।

if(AppStore.cartIsEmpty()){
  return "<button disabled>Clear cart</button>"
}
else
{
  return "<button>Clear cart</button>"
}