مقدمه JSX: HTML که جاوا اسکریپت را انجام می دهد

در اصل، مقدار برگشتی JSX به موتور رندر React می گوید که خروجی کامپوننت چیست.

HTML در جاوا اسکریپت

روزی روزگاری، دیدن نشانه‌گذاری در جاوا اسکریپت عجیب بود، اما اکنون رایج است. در واقع، داشتن نشانه گذاری و جاوا اسکریپت با هم بسیار راحت است. فرض کنید می خواهیم متغیری را در نشانه گذاری وارد کنیم. ما می‌توانیم این کار را انجام دهیم (نسخه زنده را ببینید):

export function App(props) {
  let [name, setName] = React.useState("User");
  return (
    <div className='App'>
      <h1>Greetings from InfoWorld</h1>
      <h2>Hello {name}</h2>
    </div>
  );
}

اکنون ما از متغیر “name” در داخل JSX استفاده می کنیم. متغیر name با استفاده از قلاب React.useState ایجاد می‌شود، اما تا زمانی که در محدوده باشد، می‌تواند هر متغیر جاوا اسکریپت باشد. (هنگام استفاده از اجزای تابعی، قلاب useState روش صحیح استفاده از یک متغیر در JSX است.)

پرانتزهای فرفری اطراف name در قالب JSX نشان‌دهنده عبارت JSX است. آنها به شما این امکان را می دهند که عبارات جاوا اسکریپت را در داخل نشانه گذاری و همچنین ارجاع به متغیرها اجرا کنید. جاوا اسکریپت در زمینه بزرگتر کد اطراف اجرا می شود – به همین دلیل است که می توانید به متغیرها ارجاع دهید.

اکنون ما شروع به دیدن برخی از قدرت هایی می کنیم که باعث موفقیت JSX شده است. شما تمام امکانات جاوا اسکریپت، کتابخانه های وارداتی مانند چارچوب React و یک دستور کامل HTML را دریافت می کنید که می تواند به این ویژگی ها اشاره کند.

توجه داشته باشید که JSX می تواند از عبارات استفاده کند، اما نه از جاوا اسکریپت کامل. نتیجه عبارت را در مکانی که در قالب یافت می شود به نمای نمایش می دهد. چیزهایی که مقداری را بر نمی‌گردانند، مانند حلقه‌ها، کار نمی‌کنند. (این با برخی دیگر از ابزارهای قالب متفاوت است.)  

حلقه

شما می توانید بسیاری از کارها را با JSX انجام دهید، و یکی از مهم ترین آنها حلقه زدن است. بیایید بگوییم که ما مجموعه ای از نژادهای سگ در محدوده داریم و اکنون می خواهیم آنها را به نمایش بگذاریم. نحوه انجام این کار به این صورت است (نسخه زنده را ببینید):

<div className='App'>
    <h1>Greetings from InfoWorld</h1>
    <h2></h2>
    <h3>{breeds.map((breed) => {
    return <li key={breed}>{breed}</li>;
  })}</h3>
</div>

ما از تابع map برای تکرار روی نژادها و خروجی نشانه گذاری برای هر کدام استفاده می کنیم. چیزی که در نهایت به آن می رسیم HTML/JSX در داخل جاوا اسکریپت، داخل HTML/JSX، داخل جاوا اسکریپت است!

می‌توانیم با حذف عبارت return مقدار کد را کاهش دهیم، مانند:

<h3>{breeds.map((breed) => <li key={breed}>{breed}</li> )}</h3></code>

به خاطر داشته باشید که می توانید از روش های کاربردی دیگر مانند filter و reduce برای خروجی مجموعه ها به عنوان حلقه استفاده کنید. این به شما قدرتی در هنگام کار با حلقه ها می دهد. همچنین همیشه می توانید به جاوا اسکریپت در خود مؤلفه بروید تا متغیرهای داده را تغییر دهید و سپس در صورت لزوم آن را در اختیار JSX قرار دهید. (حتی می توانید HTML را در جاوا اسکریپت بنویسید و مستقیماً در JSX نمایش دهید.)

شرط

یکی دیگر از قابلیت‌های کلیدی، برخورد با جریان کنترل شرطی مانند if/then/else است. به عنوان مثال، چه می‌شود اگر هنگام بررسی نژادهای سگ خود، بخواهیم شرایطی مانند وجود فیلد breedOrigin را بررسی کنیم؟

بر اساس تنظیماتی که تاکنون داشته‌ایم، می‌توانیم این کار را انجام دهیم (نسخه زنده را ببینید):

<h3>{breeds.map((breed) =>
  <li key={breed.name}>{
    breed.breedInfo ? breed.name + ": " + breed.breedInfo : breed.name}</li> )}</h3>

در اینجا ما از یک عملگر سه تایی استفاده می کنیم ( نحو X ? Y : Z، که می گوید، اگر X، سپس Y، در غیر این صورت، Z). این معمولاً برای تصمیم‌گیری if/then/else در داخل یک عبارت JSX استفاده می‌شود.

یک راه دیگر برای نزدیک شدن به رندر شرطی، استفاده از یک تست موردی است تا فقط در صورت موفقیت آمیز بودن آزمایش، نشانه گذاری را ارائه کنید. به عنوان مثال، اگر بخواهیم فقط در صورتی لیست را رندر کنیم که آرایه دارای عناصر باشد (یک سناریوی رایج هنگام بارگیری داده ها از یک API راه دور)، می توانیم این کار را انجام دهیم (نسخه زنده را ببینید):

<div className='App'>
      <h1>Greetings from InfoWorld</h1>
      <h2></h2>
      { breeds.length > 0 && <>
        <h3>{breeds.map((breed) => <li key={breed.name}>{breed.breedInfo ? breed.name + ": " + breed.breedInfo : breed.name}</li> )}</h3>
        </>
      }
    </div>

اگر متغیر breeds را به‌عنوان یک آرایه خالی تنظیم کنید، JSX چیزی ارائه نمی‌کند.

قطعات

تگ‌های عنصر خالی را مشاهده خواهید کرد: <> و . این قطعات React هستند که توسط JSX پشتیبانی می شوند. ما می توانستیم از

let [breeds, setBreeds] = React.useState([
    {name:'Shih Tzu',breedInfo:'Pekanese and Lhasa Apso cross',link:'https://en.wikipedia.org/wiki/Shih_Tzu'},
    {name:'Labradoodle', link:'https://en.wikipedia.org/wiki/Labradoodle'},
    {name:'Vizla',breedInfo:'Hungarian breed'},
    {name:'Catahoula'}
  ]);
  const handleBreedClick = (wikiLink) => {
    window.open(wikiLink, '_blank');
  };
  return (
    <div className='App'>
      <h1>Greetings from InfoWorld</h1>
      <h2></h2>
      { breeds.length > 0 && <>
        <h3>
          {breeds.map((breed) =>
            <li key={breed.name} onClick={() => handleBreedClick(breed.link)}>{breed.breedInfo ? breed.name + ": " + breed.breedInfo : breed.name}
            </li>
          )}
        </h3>
        </>
      }
    </div>
  );

const listItemStyle = {
    cursor: 'pointer',
    margin: '10px 0',
    padding: '5px',
    backgroundColor: '#f5f5f5',
    border: '1px solid #ccc',
    borderRadius: '5px',
  };
// … same
<li style={listItemStyle} ... </li>

<li style={{backgroundColor:'#f5f5f5',padding:'5px'}} …>