জেএসএক্সে হোয়াইটস্পেস যুক্ত করার সময় সেরা অনুশীলন

Question

আমি বুঝতে পারছি কীভাবে (এবং কেন ) জেএসএক্সে একটি সাদা স্থান যুক্ত করবেন, তবে আমি ভাবছি কোনটি সেরা অনুশীলন বা যদি কোনও বাস্তব পার্থক্য করে?

উভয় উপাদান একটি স্প্যান মধ্যে মোড়ানো

<div className="top-element-formatting">
  <span>Hello </span>
  <span className="second-word-formatting">World!</span>
</div>

এগুলিকে এক লাইনে যুক্ত করুন

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
  </div>

জেএস সহ স্থান যুক্ত করুন

<div className="top-element-formatting">
    Hello {" "}
    <span className="second-word-formatting">World!</span>
</div>

Comments

আপনার অতিরিক্ত স্প্যানের দরকার নেই, প্রতিক্রিয়াটি পাঠ্য নোডগুলির সাথে দীর্ঘস্থায়ী সমস্যাগুলি স্থির করেছে এবং আপনার দ্বিতীয় উদাহরণটি ভাল

— ডমিনিক

আমি জানি না যে এখানে একটি সংজ্ঞায়িত "সেরা অনুশীলন" রয়েছে - অবশ্যই আপনাকে <span>ট্যাগগুলিতে সমস্ত কিছু মুড়ে রাখার দরকার নেই , তবে সাদা স্থান নিয়ে উদ্বেগের সময় আমি সাধারণত জেনেরিক এইচটিএমএল অনুশীলনগুলি অনুসরণ করি।

— আর্থুরায়

Answer 1

কারণ &nbspআপনার অবিচ্ছেদী স্থান তৈরি করার কারণ, আপনার কেবল যেখানে প্রয়োজন সেখানে এটি ব্যবহার করা উচিত। বেশিরভাগ ক্ষেত্রে, এর অনিচ্ছাকৃত পার্শ্ব প্রতিক্রিয়া হবে।

প্রতিক্রিয়াটির পুরানো সংস্করণগুলি, আমি বিশ্বাস করি যে ভিডিউ-এর আগে সমস্তগুলি স্বয়ংক্রিয়ভাবে সন্নিবেশ করানো হবে <span> </span>যখন আপনি কোনও ট্যাগের ভিতরে একটি নতুন লাইন রাখবেন।

যদিও তারা আর এটি না করে, এটি নিজের কোডে এটি পরিচালনা করার নিরাপদ উপায়। আপনার যদি স্টাইল না থাকে যা নির্দিষ্টভাবে লক্ষ্য করে span(সাধারণভাবে খারাপ অভ্যাস), তবে এটিই সবচেয়ে নিরাপদ রুট।

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

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
    <span> </span>
    So much more text in this box that it really needs to be on another line.
  </div>

এই পদ্ধতিটি স্বতঃ-ছাঁটা পাঠ্য সম্পাদকদের বিরুদ্ধেও নিরাপদ।

অন্য পদ্ধতিটি ব্যবহার করছে {' '}যা এলোমেলো এইচটিএমএল ট্যাগ সন্নিবেশ করে না। স্টাইলিং, উপাদান হাইলাইট করা এবং ডিওএম থেকে বিশৃঙ্খলা অপসারণ করার সময় এটি আরও কার্যকর হতে পারে। আপনার যদি প্রতিক্রিয়া v14 বা তার আগের দিকের সামঞ্জস্যের প্রয়োজন হয় না, এটি আপনার পছন্দসই পদ্ধতি হতে হবে be

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
    {' '}
    So much more text in this box that it really needs to be on another line.
  </div>

Answer 2

আপনি সিএসএস সম্পত্তি হোয়াইট-স্পেস ব্যবহার করতে পারেন এবং এটি এনকোলেসিং ডিভ উপাদানটিতে প্রাক-মোড়কে সেট করতে পারেন।

div {
     white-space: pre-wrap;
}

Comments

যদি ধারকটি নমনীয় হয় তবে আপনার এই সমাধানটি প্রয়োজন।

— কার্টিস

এটিই কেবল অ-& nbsp; সমাধান যে আমার জন্য কাজ করে!

— ম্যাগনাস

@ ম্যাগনাস আপনি স্বাগতম, আমার মানুষ। এই উত্তরের কোনও সমাধানই আসলে আমার বিশেষ মামলার পক্ষে কাজ করে নি।

— i_code

Answer 3

আপনি উদ্ধৃতি চিহ্ন সহ সহজ সাদা স্থান যুক্ত করতে পারেন: {" "}

এছাড়াও আপনি টেমপ্লেট আক্ষরিক ব্যবহার করতে পারেন , যা সন্নিবেশ করার অনুমতি দেয়, এম্বেড এক্সপ্রেশন (কোঁকড়া ধনুর্বন্ধনী ভিতরে কোড):

`${2 * a + b}.?!=-` // Notice this sign " ` ",its not normal quotes.

Comments

প্রতিক্রিয়াটির কোন সংস্করণে এটি আপনার জন্য কাজ করে? 15.6.2 এটি এড়ানো বলে মনে হচ্ছে।

— smhg

@ এসএমএইচজি ইও। এটি প্রতিক্রিয়া সংস্করণ উপর নির্ভর করে না। ইকোমাস্ক্রিপ্ট এর টাইপ স্ক্রিপ্ট। আপনার টেমলেটটি ঠিক আছে কিনা তা পরীক্ষা করতে Chrome আপনার Chrome কে কনসোলে টাইপ করতে পারেন type আপনার বাবেল সেটিংসেও সমস্যা থাকতে পারে।

— ভ্যাসিল গুটনিক 13

আপনি জেএসএক্স এক্সপ্রেশন দিয়ে টেম্পলেট আক্ষরিক গুলিয়ে ফেলছেন। জেএসএক্সের মাধ্যমে একটি স্থান যুক্ত করতে, কেবল একটি জেএসএক্স এক্সপ্রেশনটিতে একটি স্পেস অক্ষর সমন্বিত একটি স্ট্রিং রাখুন । এটি করার সহজ উপায় {' '}। এটির জন্য আপনার টেমপ্লেট আক্ষরিক প্রয়োজন নেই, যদিও তারা কাজ করে (এবং এটি করে {" "})।

— ড্যান ড্যাসক্লেস্কু

তোমরা, এটি কিছুটা বিভ্রান্তিকর টাইপো ছিল - সংশোধন করে। যাইহোক, আমি নিশ্চিত, এখানে 99,9% লোক টেম্পলেট

— লিটারালগুলি সন্ধান করছে

Answer 4

আমি ব্যবহার করার ঝোঁক  

এটি সুন্দর নয় তবে আমি খুঁজে পেয়েছি সাদা জায়গা যোগ করার সর্বনিম্ন বিভ্রান্তিকর উপায় এবং এটি আমাকে কতটা স্পেসস্পেস যুক্ত করব তার উপর আমাকে নিখুঁত নিয়ন্ত্রণ দেয়।

যদি আমি 5 টি স্পেস যুক্ত করতে চাই:

Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span className="second-word-formatting">World!</span>

কয়েক সপ্তাহ পরে কোডে ফিরে এলে আমি এখানে ঠিক কী করার চেষ্টা করছি তা সনাক্ত করা সহজ।

Comments

আমি অনুশীলনে কল্পনা করতে পারি না 5 টি অ-ব্রেকিং স্পেসের ব্যবহার কী হবে যা টাইপোগ্রাফিকভাবে বোধগম্য হয় তবে এ জাতীয় ঘটনাটি বাদ দিয়ে অনুশীলনে ব্যবহার করা ভুল। আপনি যদি এটি লেআউটের জন্য ব্যবহার করছেন তবে আপনার পরিবর্তে সিএসএস ব্যবহার করা উচিত এবং আপনার যদি কোনও স্থান যুক্ত করার প্রয়োজন হয় তবে এটি নন-ব্রেকিংয়ের প্রয়োজন নেই সেখানে আরও অনেকগুলি স্থান রয়েছে যা বেশি টাইপোগ্রাফিক ধারণা তৈরি করে। : উদাহরণস্বরূপ, এই প্রশ্নের দেখুন stackoverflow.com/questions/8515365/...

— guioconnor

@ গুইকননর আপনার ধারণাটি প্রসারিত করার চেষ্টা করুন এবং সম্পাদক অ্যাপ্লিকেশন যেমন ভিসকোডের কথা ভাবেন এবং আপনি দেখতে পাবেন যে এটি সম্পূর্ণ টাইপোগ্রাফিক অর্থে তৈরি করেছে: ডি।

— ড্যান

Answer 5

 আপনার অতিরিক্ত স্থানটি sert োকানো বা মোড়ানোর দরকার নেই <span/>। স্থানের জন্য কেবল এইচটিএমএল সত্তা কোড ব্যবহার করুন - 

এইচটিএমএল-সত্তা হিসাবে নিয়মিত স্থান .োকান

<form>
  <div>Full name:</span>&#32;
  <span>{this.props.fullName}</span>
</form>

Comments

সাইড নোট: আজ আমি এই জুড়ে এসেছিল সুন্দর স্থান সত্তা বিন্যাস দ্বারা আমার কোড ভঙ্গ করে ড। আপনি যখন {""} ব্যবহার করেন, এটি নিজেই একটি লাইনে কাজ করে এবং ভাঙবে না।

— গোরহক

আমি নিজের উত্তরটিতে এটি যুক্ত করতে এসেছি। পরিবর্তে আমি আপনার upvated হয়েছে।

— undefined

Answer 6

আমি বিভিন্ন লাইনে উপাদানগুলির পাশে পাঠ্য রাখার সময় ব্যবহার করার জন্য একটি ভাল কনভেনশনটি চিন্তা করার চেষ্টা করেছি এবং একটি দম্পতি ভাল বিকল্প পেয়েছি:

<p>
    Hello {
        <span>World</span>
    }!
</p>

বা

<p>
    Hello {}
    <span>World</span>
    {} again!
</p>

এগুলির প্রত্যেকটি অতিরিক্ত  বা অন্য বহিরাগত মার্কআপ ব্যতীত পরিষ্কার এইচটিএমএল উত্পাদন করে । এটি ব্যবহারের চেয়ে কম পাঠ্য নোড তৈরি {' '}করে এবং এইচটিএমএল সত্তা যেখানে ব্যবহার {' hello & goodbye '}করে না সেখানে ব্যবহারের অনুমতি দেয়।

Answer 7

আপনি স্থানটির জন্য ডাবল উদ্ধৃতি এবং একক উদ্ধৃতি উভয় মত প্রকাশের মতো কোঁকড়া ধনুর্বন্ধনী ব্যবহার করতে পারেন,

{" "} or {' '}

আপনি ES6 টেম্পলেট আক্ষরিক অর্থাত ব্যবহার করতে পারেন,

`   <li></li>` or `  ${value}`

আপনি নীচের মতো & nbsp ব্যবহার করতে পারেন (স্প্যানের অভ্যন্তরে)

<span>sample text &nbsp; </span>

এইচটিএমএল বিষয়বস্তু প্রিন্ট করার সময় আপনি বিপজ্জনকভাবে সেটইনার এইচটিএমএল & nbsp ব্যবহার করতে পারেন

<div dangerouslySetInnerHTML={{__html: 'sample html text: &nbsp;'}} />

Answer 8

স্প্যান উপাদান এবং সামগ্রীর মধ্যে স্থান তৈরি করতে {} বা {``}  ব্যবহার করুন ।

<b> {notif.name} </b> <span id="value"> &nbsp;{ notif.count }{``} </span>

Comments

nbsp = নন-ব্রেকএল স্পেস, যা নিয়মিত স্থান থেকে আলাদা ইউনিকোড চরিত্র এবং লাইন ব্রেকিংকে সীমাবদ্ধ করে। কখনও কখনও এটি আকাঙ্ক্ষিত হয়, কেবল এটি দেখানো হয় যে এটি অন্যান্য বিকল্পগুলির সমতুল্য নয়।

— বেনি চেরনিয়াভস্কি-পাসকিন

Answer 9

লক্ষ্যটি যদি দুটি উপাদান আলাদা করতে হয় তবে আপনি নীচের মত সিএসএস ব্যবহার করতে পারেন:

A<span style={{paddingLeft: '20px'}}>B</span>