আমি কীভাবে শর্তাধীন প্রতিক্রিয়া উপাদানগুলিতে বৈশিষ্ট্যগুলি যুক্ত করব?

Question

কোনও নির্দিষ্ট শর্ত পূরণ হলে কেবল একটি প্রতিক্রিয়া উপাদানটিতে অ্যাট্রিবিউট যুক্ত করার কোনও উপায় আছে কি?

আমি রেন্ডার পরে একটি অজ্যাক্স কলের ভিত্তিতে উপাদান তৈরি করতে প্রয়োজনীয় এবং পড়ার জন্য কেবলমাত্র অ্যাট্রিবিউট যুক্ত করার কথা বলেছি, তবে আমি কীভাবে এটি সমাধান করতে পারি না কারণ পঠনযোগ্য = "মিথ্যা" গুণটি সম্পূর্ণরূপে বাদ দেওয়ার মতো নয়।

নীচের উদাহরণে আমি কী চাই তা ব্যাখ্যা করা উচিত তবে এটি কার্যকর হবে না (পার্স ত্রুটি: অপ্রত্যাশিত শনাক্তকারী)।

var React = require('React');

var MyOwnInput = React.createClass({
    render: function () {
        return (
            <div>
                <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/>
            </div>
        );
    }
});

module.exports = React.createClass({
    getInitialState: function () {
        return {
            isRequired: false
        }
    },
    componentDidMount: function () {
        this.setState({
            isRequired: true
        });
    },
    render: function () {
        var isRequired = this.state.isRequired;

        return (
            <MyOwnInput name="test" {isRequired ? "required" : ""} />
        );
    }
});

Comments

কোনও মন্তব্য কারও সাহায্য করতে পারে, আমি খুঁজে পেয়েছি 16.3 এর প্রতিক্রিয়া জানায় না এবং পুনরায় সরবরাহকারীকে উপাদানটির এইচটিএমএল বৈশিষ্ট্যগুলি আপডেট করে যদি আপনি কেবল তাদের কোনও স্টোরে ( ফেডু রিডেক্স ) পরিবর্তন করেন এবং উপাদানটির সাথে আবদ্ধ হন। এর অর্থ উপাদানটির ফী রয়েছে aria-modal=true, আপনি পরিবর্তনগুলি (মিথ্যাতে) টি এরিয়া / ডেটা অ্যাট্রিবিউটের স্টোরের দিকে ঠেলে দিচ্ছেন , তবে আর কিছুই পরিবর্তন করা হয়নি (যেমন উপাদানগুলির সামগ্রী বা শ্রেণি বা সেখানে ভেরিয়েবল) ফলাফল হিসাবে রিঅ্যাক্টজেগুলি আরিয়া / আপডেট করবে না যে উপাদানগুলিতে ডেটা অ্যাটর্সগুলি। আমি বুঝতে পারার জন্য সারা দিন প্রায় ঘোরাঘুরি করছি।

— অ্যালেক্সনিকনভ

Answer 1

স্পষ্টতই, কিছু বৈশিষ্ট্যের জন্য, প্রতিক্রিয়াটি যদি গুণকের কাছে এটির মূল্য দেয় সত্যবাদী না হয় তবে গুণটি বাদ দিতে যথেষ্ট বুদ্ধিমান। উদাহরণ স্বরূপ:

var InputComponent = React.createClass({
    render: function() {
        var required = true;
        var disabled = false;

        return (
            <input type="text" disabled={disabled} required={required} />
        );
    }
});

ফলাফল হবে:

<input type="text" required>

আপডেট করুন: কেউ যদি, কিভাবে / কেন ঘটে তবে আপনি ReactDOM এর সোর্স কোডে বিস্তারিত জানতে পারেন হিসাবে অদ্ভুত বিশেষভাবে লাইন 30 এবং 167 এর DOMProperty.js ফাইল।

Comments

সাধারনত null"এরকম আচরণ করা যেমন আমি একে একে নির্দিষ্ট করে নি"। বুলিয়ান ডোম বৈশিষ্ট্যের জন্য সত্য / মিথ্যা <input disabled>React.createElement('input', {disabled: true})

— গুণটির

আমি রাজী. আমি নামটির পুনরাবৃত্তি করলাম কারণ অতীতে নির্দিষ্ট ব্রাউজারগুলির সাথে আমার সমস্যা হয়েছিল এবং অভ্যাসটি আমার সাথে এতটা আটকে গিয়েছিল যে আমি নিজেই ="required"অংশটিতে যুক্ত করেছি। ক্রোম আসলে মান ছাড়াই কেবল অ্যাট্রিবিউটিকে রেন্ডার করেছিল।

— জুন্দেমার্কো

readonlyকখনই যুক্ত হয় না কারণ প্রতিক্রিয়াটি প্রত্যাশার প্রত্যাশা করে readOnly(মূলধন ও সাথে)।

— সর্বাধিক

ধন্যবাদ! মানটি কেবল একটি খালি স্ট্রিং বা শূন্য নয় তা নিশ্চিত করুন, এগুলি সরাতে না পারে। উদাহরণস্বরূপ, যদি আপনি এই মত একটি মান পাস করতে পারে, এবং এটা নিশ্চিত করুন যে এটি যদি এটা মিথ্যা মূল্যায়ণ মুছে ফেলা হবে করা উচিত: alt={props.alt || null}।

— জেক

ধন্যবাদ, @ জ্যাক আমি এট্রিবিউটটি সেট করার চেষ্টা করেছি false, তবে কেবল nullনিশ্চিত করেছি যে গুণটি আসলে মুছে ফেলা হয়েছে।

— নাথন আর্থার

Answer 2

জুঁদেমার্কোর উত্তর সাধারণত সঠিক, তবে এখানে আরও একটি বিকল্প রয়েছে।

আপনি পছন্দ করেন এমন একটি বস্তু তৈরি করুন:

var inputProps = {
  value: 'foo',
  onChange: this.handleChange
};

if (condition)
  inputProps.disabled = true;

স্প্রেড সহ রেন্ডার করুন, allyচ্ছিকভাবে অন্যান্য প্রপসগুলিও পাস করুন

<input
    value="this is overridden by inputProps"
    {...inputProps}
    onChange={overridesInputProps}
 />

Comments

এটি আসলে খুব দরকারী, বিশেষত শর্তাধীনভাবে অনেক সম্পত্তি যুক্ত করার সময় (এবং ব্যক্তিগতভাবে আমার কোনও ধারণা ছিল না যে এটি এভাবে করা যায়)।

— জুনেন্দেমার্কো

খুব মার্জিত, তবে এটি কী ইনপুটপ্রোস.ডিজিয়েড = সত্য হওয়া উচিত নয়?

— জোপপে

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

— নবীন কুমার পিজি

যদি কেউ এই "চিনির" সুনির্দিষ্ট শব্দার্থ সম্পর্কে উদ্বিগ্ন হন তবে আপনি স্ক্রিপ্টটি দেখতে পারেন যে আপনার .jsx স্থানান্তরিত হয়েছে আপনি দেখতে পাবেন যে এতে একটি ফাংশন _extendsযুক্ত হয়েছে, যা (সাধারণ পরিস্থিতিতে) propsনির্মিত থেকে নেওয়া হবে "সাধারণ বৈশিষ্ট্য" এবং প্রয়োগ Object.assign(props, inputProps)।

— নাথান চ্যাপেল

Answer 3

এখানে ব্যবহার একটি উদাহরণ বুটস্ট্র্যাপ এর Buttonমাধ্যমে প্রতিক্রিয়া-বুটস্ট্র্যাপ (সংস্করণ 0.32.4):

var condition = true;

return (
  <Button {...(condition ? {bsStyle: 'success'} : {})} />
);

শর্তের উপর নির্ভর করে, হয় হয় {bsStyle: 'success'}বা {}ফিরে আসবে। স্প্রেড অপারেটর তারপরে প্রত্যাবর্তিত অবজেক্টের বৈশিষ্ট্যগুলিকে Buttonউপাদানগুলিতে ছড়িয়ে দেবে । মিথ্যা ক্ষেত্রে, যেহেতু প্রত্যাবর্তিত অবজেক্টে কোনও বৈশিষ্ট্য বিদ্যমান নেই, তাই উপাদানটিতে কিছুই প্রেরণ করা হবে না।

---

অ্যান্ডি পোহিলের মন্তব্যের ভিত্তিতে একটি বিকল্প উপায় :

var condition = true;

return (
  <Button bsStyle={condition ? 'success' : undefined} />
);

শুধুমাত্র ছোট পার্থক্য হচ্ছে দ্বিতীয় উদাহরণে ভেতরের উপাদান <Button/>এর propsঅবজেক্ট একটি কী থাকবে bsStyleএকটি মান সঙ্গে undefined।

Comments

@ পুনিট, স্প্রেড অপারেটরের শর্তসাপেক্ষ অপারেটরের চেয়ে কম অগ্রাধিকার রয়েছে, সুতরাং শর্তটি প্রথমে মূল্যায়ন করা হয়, (হয় {bsStyle: 'success'}বা {}এটির ফলাফল), তারপরে সেই বস্তুটি ছড়িয়ে পড়ে।

— ভিক্টর জামামানিয়ান

নিম্নলিখিতটি কি একই কাজটি করবে <Button bsStyle={ condition ? 'success': undefined } /> আমি সিনট্যাক্সটি কিছুটা সহজ পেতে চাইলে পাসিং undefinedসম্পত্তি বাদ দিবে।

— অ্যান্ডি পোহিল

@AndyPolhill আমাকে ভাল এবং অনেক সহজ কোড পড়তে দেখায়, শুধুমাত্র ছোট পার্থক্য হল যে আপনার কোড উদাহরণে ভেতরের উপাদান <Button/>এর propsঅবজেক্ট একটি কী থাকবে bsStyleমান undefined।

— আরমান ইয়েজিয়ারসায়ান

@ অ্যান্ডিপোলহিল সিন্টেক্সটি পড়া কঠিন বলে মনে করার কারণ এটিতে কিছু অন্তর্নিহিত প্রথম বন্ধনী অনুপস্থিত যা উদাহরণটি বিদেশী দেখায় এবং বোঝা শক্ত করে তোলে। প্রথম বন্ধনী যুক্ত করতে সম্পাদনা করা হচ্ছে।

— গোবিন্দ রায়

প্রথম পদ্ধতিটি আমার জন্য নিখুঁতভাবে কাজ করেছে, আপনাকে ধন্যবাদ

— লিরান এইচ

Answer 4

এখানে একটি বিকল্প।

var condition = true;

var props = {
  value: 'foo',
  ...( condition && { disabled: true } )
};

var component = <div { ...props } />;

অথবা এর ইনলাইন সংস্করণ

var condition = true;

var component = (
  <div
    value="foo"
    { ...( condition && { disabled: true } ) } />
);

Comments

আমি এই পদ্ধতির পছন্দ করি, এটি আমার সহকর্মীদের মধ্যে শীতল করে তোলে। একসাথে ঠাট্টা করা, এটির চেহারা থেকে, প্রপসগুলি কেবল কী-মূল্যের জুটি হিসাবে শেষ হয়েছে, এটি কি সঠিক?

— জননিকিউ

যদি conditionএটি মিথ্যা হয়, তবে এটি মিথ্যা দ্বারা প্রসারিত / পুনরাবৃত্তি করার চেষ্টা করবে, যা আমি সঠিক বলে মনে করি না।

— লার্স নাইস্ট্রাম

@ লার্সনাইস্ট্রোম, এটি উপলব্ধি করে। স্প্রেড অপারেটর কেবল পুনরাবৃত্তি গ্রহণ করে, যেখানে falseএক নয়। কেবল বাবেলের সাথে পরীক্ষা করুন। conditionব্যাবেল যেভাবে অপারেটরকে প্রয়োগ করে সেভাবে এটি মিথ্যা হিসাবে মূল্যায়ন করার সময় এটির সাথে এটি কাজ করে । যদিও একটি তুচ্ছ কাজ হতে পারে ...( condition ? { disabled: true } : {} ), এটি তখন কিছুটা ভারবস হয়ে যায়। এই সুন্দর ইনপুট জন্য ধন্যবাদ!

— মৌসুম

+1 আপনি যদি শর্তসাপেক্ষে আউটপুট data-*বা aria-*বৈশিষ্ট্যগুলি করতে চান , তবে এটি জেএসএক্সের একটি বিশেষ ক্ষেত্রে তাই এই বৈশিষ্ট্যটি বাদ দেওয়ার পরিবর্তে data-my-conditional-attr={ false }আউটপুট আসবে যদি এই পদ্ধতির প্রয়োজন হয় data-my-conditional-attr="false"। ফেসবুক.

— github.io/react/docs/dom-elements.html

Answer 5

আমি এটি করার একটি উপায় এখানে।

শর্তযুক্ত :

<Label
    {...{
      text: label,
      type,
      ...(tooltip && { tooltip }),
      isRequired: required
    }}
/>

আমি এখনও প্রপসগুলি নিয়মিতভাবে পাস করার পদ্ধতিটি ব্যবহার করতে পছন্দ করি কারণ কোনও শর্ত না থাকার ক্ষেত্রে এটি আরও পাঠযোগ্য (আমার মতে)।

শর্ত ছাড়াই :

<Label text={label} type={type} tooltip={tooltip} isRequired={required} />

Comments

আপনি কি দয়া করে ব্যাখ্যা করতে পারেন যে এই অংশটি কীভাবে কাজ করে - ...(tooltip && { tooltip }),? এটি উপাদানটিতে কাজ করে কিন্তু যখন আমি

— কোডটিতে

সম্ভবত কারণ falseyValue && {}মিথ্যা ফিরে আসবে, সুতরাং সম্ভবত আপনি মিথ্যা উদাহরণ হিসাবে ছড়িয়ে পড়ছেন ...(false)। সম্পূর্ণ এক্সপ্রেশনটি ব্যবহার করা আরও ভাল যাতে ...(condition ? {foo: 'bar'} : {})

— স্প্রেডটি

Answer 6

আপনি একই শর্টকাট ব্যবহার করতে পারেন, যা উপাদানগুলির অংশগুলি ( {isVisible && <SomeComponent />}) যুক্ত করতে / সরানোর জন্য ব্যবহৃত হয় ।

class MyComponent extends React.Component {
  render() {
    return (
      <div someAttribute={someCondition && someValue} />
    );
  }
}

Comments

যদি someConditionসত্য হয় তবে someValueমিথ্যা হয় (যেমন falseনিজেই, বা 0, ইত্যাদি), তবুও বৈশিষ্ট্যটি অন্তর্ভুক্ত হয়? এটি গুরুত্বপূর্ণ যদি স্পষ্টভাবে একটি মিথ্যা মান অন্তর্ভুক্ত করা প্রয়োজন, উদাহরণস্বরূপ 0কোনও স্থানাঙ্ক বৈশিষ্ট্যের জন্য একটি

— এন্ড্রু উইলিয়ামস

সাধারণত, অ্যাট্রিবিউট, কিন্তু না ক্ষেত্রে বাদ দেওয়া হয় data-*এবং aria-*উপরের আমার মন্তব্য দেখুন। যদি আপনি মানটি উদ্ধৃত করে থাকেন বা স্ট্রিং হিসাবে কাস্ট করেন তবে বৈশিষ্ট্যটি প্রদর্শিত হবে: উদাহরণস্বরূপ someAttr={ `${falsyValue}` }রেন্ডার হতে পারেsomeAttr="false"

— পিটিএম

Answer 7

ধরা যাক আমরা কোনও শর্ত সত্য হলে একটি কাস্টম সম্পত্তি (এরিয়া- * বা ডেটা- * ব্যবহার করে) যুক্ত করতে চাই:

{...this.props.isTrue && {'aria-name' : 'something here'}}

বলি যে কোনও শর্তটি সত্য হলে আমরা একটি শৈলীর সম্পত্তি যুক্ত করতে চাই:

{...this.props.isTrue && {style : {color: 'red'}}}

Answer 8

আপনি যদি ECMAScript 6 ব্যবহার করেন তবে আপনি সহজভাবে এটি লিখতে পারেন।

// First, create a wrap object.
const wrap = {
    [variableName]: true
}
// Then, use it
<SomeComponent {...{wrap}} />

Answer 9

এটি কাজ করা উচিত, যেহেতু আপনার রাজ্যটি আজাক্স কলের পরে পরিবর্তিত হবে এবং প্যারেন্ট উপাদানটি পুনরায় রেন্ডার করবে।

render : function () {
    var item;
    if (this.state.isRequired) {
        item = <MyOwnInput attribute={'whatever'} />
    } else {
        item = <MyOwnInput />
    }
    return (
        <div>
            {item}
        </div>
    );
}

Answer 10

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

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

একটি উদাহরণ শর্তাধীনভাবে কম্পোনেন্ট এবং এর শৈলীর বৈশিষ্ট্যকে কীভাবে রেন্ডার করতে হয় তাও দেখায়।

এখানে একটি সহজ উদাহরণ:

class App extends React.Component {
  state = {
    isTrue: true
  };

  render() {
    return (
      <div>
        {this.state.isTrue ? (
          <button style={{ color: this.state.isTrue ? "red" : "blue" }}>
            I am rendered if TRUE
          </button>
        ) : (
          <button>I am rendered if FALSE</button>
        )}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<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="root"></div>

Comments

এটি প্রচুর গুণাবলী সহ সত্যই অগোছালো হতে পারে। আমি স্প্রেড ভেরিয়েন্টটি আরও ভাল পছন্দ করি।

— রেমি স্টোর

হ্যাঁ আপনার ঠিক আছে তবে এটি এমন একজনের জন্য যার সম্পর্কে ওভারভিউ নেওয়া দরকার আমি অন্য একটি উদাহরণ তৈরি করব। তবে বিষয়গুলি সহজ রাখতে চান।

— জুরজ

Answer 11

জেএসএক্স পোস্ট গভীরতার সাথে বিবেচনা করে আপনি নিজের সমস্যাটি এভাবে সমাধান করতে পারেন:

if (isRequired) {
  return (
    <MyOwnInput name="test" required='required' />
  );
}
return (
    <MyOwnInput name="test" />
);