প্রতিক্রিয়ায় শর্তসাপেক্ষ স্টাইলিং পরিচালনা করার সঠিক উপায়

Question

আমি এখনই কিছু প্রতিক্রিয়া করছি এবং আমি ভাবছিলাম শর্তাধীন স্টাইলিং করার কোনও "সঠিক" উপায় আছে কিনা। টিউটোরিয়ালে তারা ব্যবহার করে

style={{
  textDecoration: completed ? 'line-through' : 'none'
}}

আমি ইনলাইন স্টাইলিং ব্যবহার না করা পছন্দ করি তাই শর্তাধীন স্টাইলিং নিয়ন্ত্রণের জন্য আমি পরিবর্তে একটি ক্লাস ব্যবহার করতে চাই। কীভাবে কেউ এই প্রতিক্রিয়া চিন্তাভাবনা করে? বা আমি কি এই ইনলাইন স্টাইলিংয়ের উপায়টি ব্যবহার করব?

Comments

আমার মনে হয় আপনার থাকতে পারে reduxএবং reactবিভ্রান্ত হতে পারেন । স্টাইলিংয়ের সাথে রেডাক্সের কোনও সম্পর্ক নেই।

— রসপিডিয়া

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

— ডান্ডাভিস

@ অস্ট্রিয়া উইকিপিডিয়া হ্যাঁ আপনাকে ধন্যবাদ, মিশ্রিত হয়ে উঠেছে, এই বিষয়ে চিন্তা করার সময় রিডুএক্স টিউটোরিয়ালটি দেখছিল, আপনাকে ধন্যবাদ!

— ডেভিডটিয়েন

যদি আপনি নিশ্চিত না হন যে ক্যাসকেডের কারণে পাঠ্য-সজ্জার মান কী হবে এবং আপনি যদি সম্পূর্ণরূপে সত্য হয় তবে কেবলমাত্র একটি লাইন-মাধ্যমে প্রয়োগ করতে চান, আপনাকে একটি স্টাইল অবজেক্ট তৈরি করতে হবে। এইভাবে, আপনি এটি অন্য কোনও মান হিসাবে দুর্ঘটনাক্রমে কারও কাছে সেট করবেন না। কনস্টাইল স্টাইল = {} if (সম্পূর্ণ) {স্টাইল ['TextDecoration'] = 'লাইন-থ্রু'}

— এডওয়ার্ড

Answer 1

আপনি যদি কোনও শ্রেণীর নাম ব্যবহার করতে পছন্দ করেন তবে সর্বদা কোনও শ্রেণীর নাম ব্যবহার করুন।

className={completed ? 'text-strike' : null}

আপনি ক্লাসের নামগুলি প্যাকেজ সহায়কও দেখতে পারেন । এটির সাথে আপনার কোডটি দেখতে এইরকম হবে:

className={classNames({ 'text-strike': completed })}

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

পোস্টস্ক্রিপ্ট [06-AUG-2019]

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

Comments

ওহে, আপনি যদি শর্তযুক্ত স্টাইলিং পদ্ধতি হিসাবে ক্লাসনেমটি ব্যবহার করার সিদ্ধান্ত নেন। ছাড়া classNames lib। আমি আপনাকে undefinedপরিবর্তে ব্যবহার করার পরামর্শ দিচ্ছি null। className⚡️ - | প্রকার (undefined স্ট্রিং) - সম্পত্তি ইনপুট স্ট্রিং বা অনির্ধারিত টাইপ করার সময় লাগে

— 0xx

@ জ্যাডরিজক আরও ভাল পন্থা হ'ল ক্লাসের নাম সেট না করার জন্য আপনার কাছে যদি কোনও বৈধ মান না থাকে তবে তা আরও ভাল। const attrs = completed?{className:'text-strike'}:{}তারপরে <li {...attrs}>text to maybe strike</li>(স্প্রেড অপারেটর) আপনার অর্পণ করার জন্য ভাল মান না থাকলে আপনি ক্লাসের নামটি সেট করেন না don't এটি এমন কিছু ইনলাইন স্টাইল সেট করার জন্য একটি গুরুত্বপূর্ণ পন্থা যেখানে আপনি বর্তমান মানটি কী তা জানতে পারবেন না (কারণ এটি আপনি নিয়ন্ত্রণ করতে পারেন না এমন কোনও ফাইলে সিএসএস দ্বারা সেট করা যেতে পারে)।

— LinuxDisciple

@ লিনাক্সডিসিপল যদি সমস্ত ক্ষেত্র মিথ্যা হিসাবে মূল্যায়ন করে তবে classnamesকেবল একটি খালি স্ট্রিং প্রদান করে। এটি কোনও সিএসএস দ্বারা প্রভাবিত হবে না।

— ডেভিড এল ওয়ালশ

@ ডেভিডএল.ওয়ালশ 21 ঘন্টা আগে আমি ভেবেছিলাম জ্যাডরিজকের সমাধানটি এর মধ্যে একটি মিথ্যা পছন্দ ছিল nullএবং undefinedএরপরেও classএইচটিএমএলে (অর্থাত্ <p class></p>পরিবর্তে <p></p>) কোনও মূল্যমানের গুণাবলীর ফলস্বরূপ ফলস্বরূপ আমি এমন একটি পদ্ধতি সরবরাহ করেছি যা একেবারেই সেটিং এড়ায় না className। এটি যেমন ঘটেছিল আমি জ্যাডরিজকের সমাধান সম্পর্কে ভুল ছিলাম। বর্ণিত সমস্যার জন্য, আমি বিশ্বাস করি জ্যাডরিজকের পরিমার্জন সহ আপনার সমাধানটি সবচেয়ে ভাল। আমার সিনট্যাক্স শর্তসাপেক্ষে প্রপস এবং তাদের মানগুলির একটি স্বেচ্ছাসেবী তালিকা সেট করতে পারে তবে কেবল শ্রেণীর নাম সেট করার জন্য এটি ওভারকিল।

— লিনাক্সডিসিপল

Answer 2

 <div style={{ visibility: this.state.driverDetails.firstName != undefined? 'visible': 'hidden'}}></div>

উপরের কোডটি চেকআউট করুন। যে কৌশলটি করবে।

Comments

ঠিক এরকম কিছু খুঁজছিল। শর্তসাপেক্ষ ইনলাইন স্টাইলিং, আপনাকে ধন্যবাদ।

— সৌভিক ঘোষ

<ডিভ স্টাইল = {{দৃশ্যমানতা: this.state.driverDetails.firstName! == অপরিবর্তিত? 'দৃশ্যমান': 'লুকানো'}}> </ div>। ছোট টাইপ ==।

— বিনায়ক শাহদেও

Answer 3

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

style={ someCondition ? { textAlign:'center', paddingTop: '50%'} : {}}

যদি 'কিছু শর্ত' না পূর্ণ হয় তবে আপনি খালি বস্তুটি পাস করেন।

Comments

এই প্যাটার্নটি যদিও অপ্রয়োজনীয় পার্থক্য তৈরি করে না? করে DOM diffing আমার বোঝার যে styleঠেকনা এখানে সবসময় থেকে জাভাস্ক্রিপ্ট মধ্যে পরিবর্তন হবে {} != {} যদি আমি diffing সম্পর্কে সঠিক নই, সম্ভবত এটা ব্যবহার করা ভালো " undefined" পরিবর্তে " {}"

— ডসন বি

ভাল নোট। আমি এই সম্পর্কে নিশ্চিত নই।

— ভ্লাদো

Answer 4

প্রথমত, আমি আপনার সাথে শৈলীর বিষয় হিসাবে একমত - আমি ইনলাইন শৈলীর পরিবর্তে শর্তসাপেক্ষে ক্লাসগুলিও প্রয়োগ করব (এবং এটিও করব)। তবে আপনি একই কৌশলটি ব্যবহার করতে পারেন:

<div className={{completed ? "completed" : ""}}></div>

আরও জটিল রাষ্ট্রের জন্য, ক্লাসগুলির একটি অ্যারে সংগ্রহ করুন এবং সেগুলি প্রয়োগ করুন:

var classes = [];

if (completed) classes.push("completed");
if (foo) classes.push("foo");
if (someComplicatedCondition) classes.push("bar");

return <div className={{classes.join(" ")}}></div>;

Answer 5

এর পরিবর্তে:

style={{
  textDecoration: completed ? 'line-through' : 'none'
}}

আপনি শর্ট সার্কিট ব্যবহার করে নিম্নলিখিত চেষ্টা করতে পারেন:

style={{
  textDecoration: completed && 'line-through'
}}

https://codeburst.io/javascript-short-circuit-conditionsals-bbc13ac3e9eb

লিঙ্ক থেকে তথ্য কী বিট:

সংক্ষিপ্ত সার্কিটের অর্থ হ'ল জাভাস্ক্রিপ্টে যখন আমরা একটি অ্যান্ড এক্সপ্রেশন (&&) মূল্যায়ন করি, যদি প্রথম অপারেন্ডটি মিথ্যা হয়, জাভাস্ক্রিপ্ট শর্ট সার্কিট হবে এবং দ্বিতীয় অপারেন্ডের দিকেও তাকাবে না।

এটি লক্ষণীয় যে প্রথম অপারেন্ডটি মিথ্যা হলে এটি মিথ্যা ফিরে আসবে, সুতরাং এটি কীভাবে আপনার স্টাইলকে প্রভাবিত করবে তা বিবেচনা করতে হবে।

অন্যান্য সমাধানগুলি আরও সেরা অনুশীলন হতে পারে তবে ভেবেছিল এটি ভাগ করে নেওয়া ভাল।

Answer 6

অন্য উপায়, ইনলাইন শৈলী এবং স্প্রেড অপারেটর ব্যবহার করে

style={{
  ...completed ? { textDecoration: completed } : {}
}}

সেই পরিস্থিতিতে কিছু পরিস্থিতিতে কার্যকর হতে হবে যেখানে আপনি শর্তের ভিত্তিতে একই সময়ে বেসগুলির একগুচ্ছ বৈশিষ্ট্য যুক্ত করতে চান।

Comments

আপনি যদি কোনও ডিফল্ট স্টাইল পরিবর্তন করতে না চান তবে খুব ভাল পন্থা

— ধিল্ট

Answer 7

একই প্রশ্নের উত্তর দেওয়ার চেষ্টা করার সময় আমি এই প্রশ্নটি পেরিয়ে এসেছি। ক্লাস অ্যারে ও জয়েনের সাথে ম্যাকক্রোহানের অভিমত শক্ত।

আমার অভিজ্ঞতার মাধ্যমে, আমি প্রচুর লিগ্যাসি রুবি কোডের সাথে কাজ করছি যা প্রতিক্রিয়াতে রূপান্তরিত হচ্ছে এবং উপাদানটি তৈরি করার সাথে সাথে আমি নিজেকে বিদ্যমান সিএসএস ক্লাস এবং ইনলাইন উভয় শৈলীর জন্যই পৌঁছতে দেখি।

একটি উপাদান ভিতরে স্নিপেট উদাহরণ:

// if failed, progress bar is red, otherwise green 
<div
    className={`progress-bar ${failed ? failed' : ''}`}
    style={{ width: this.getPercentage() }} 
/>

আবার, আমি নিজেকে লেগ্যাসি সিএসএস কোডে পৌঁছাচ্ছি, উপাদানটির সাথে এটি "প্যাকেজিং" করছি এবং এগিয়ে চলেছি।

সুতরাং, আমি সত্যিই অনুভব করি যে এটি "সেরা" কী হিসাবে এটি আপনার প্রকল্পের উপর নির্ভর করে লেবেলটি ব্যাপকভাবে পরিবর্তিত হবে তা কিছুটা আকাশে রয়েছে।

Comments

আপনার ক্লাসের নামগুলি শৈলীর বৈশিষ্ট্যের সাথে একত্রিত করা উচিত নয়, এটি কিছুটা

— গোলমেলে

Answer 8

স্টাইলিং হ্যান্ডেল করার সর্বোত্তম উপায় হ'ল CSS বৈশিষ্ট্যের সেট সহ ক্লাস ব্যবহার করা।

উদাহরণ:

<Component className={this.getColor()} />

getColor() {
    let class = "badge m2";
    class += this.state.count===0 ? "warning" : danger;
    return class;
}

Answer 9

আপনি এই জাতীয় কিছু ব্যবহার করতে পারেন।

render () {
    var btnClass = 'btn';
    if (this.state.isPressed) btnClass += ' btn-pressed';
    else if (this.state.isHovered) btnClass += ' btn-over';
    return <button className={btnClass}>{this.props.label}</button>;
  }

অন্যথায়, আপনি ব্যবহার করতে পারেন classnames NPM প্যাকেজ গতিশীল এবং শর্তাধীন classname সাজসরঞ্জাম সঙ্গে (বিশেষ করে বেশি, তাই শর্তসাপেক্ষ স্ট্রিং ম্যানিপুলেশন বেশি) কাজ সহজ করা।

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'