رسیدگی به رویداد و ارائه مشروط در React

این مقاله بخشی از سری “Mastering React با Next.JS: راهنمای توسعه دهنده” است. در مقاله قبلی ما با عنوان “درک مؤلفه ها ، غرفه ها و مدیریت دولت در React” ، ما مفاهیم بنیادی را مورد بررسی قرار دادیم که باعث می شود چنین کتابخانه ای قدرتمند برای ایجاد رابط های کاربر ایجاد شود. ما یاد گرفتیم که چگونه مؤلفه ها به عنوان بلوک های ساختمانی برنامه شما عمل می کنند ، چگونه Props امکان اشتراک داده ها را بین مؤلفه ها و چگونه حالت به شما امکان می دهد داده های پویا را در برنامه خود مدیریت کنید. اگر هنوز آن را بررسی نکرده اید ، برای درک اصول اولیه React یک خوانده شده است.

حال ، بیایید با غواصی در مورد نحوه واکنش با وقایع و ارائه محتوا به صورت مشروط بر روی آن بنیاد بنا کنیم. این دو مفهوم در قلب ایجاد رابط های کاربر پسند قرار دارند. در این مقاله ، ما چگونه می توانیم از وقایع ، چگونگی ارائه مؤلفه ها به صورت مشروط ، و اینکه چگونه می توانید این مفاهیم را برای کار در پروژه های خود قرار دهید ، می پردازیم.

رسیدگی به وقایع در React

رویکرد React برای رسیدگی به رویداد شبیه به JavaScript ساده است اما با چند تفاوت مهم. در اینجا آنچه شما باید بدانید آورده شده است:

اصول اولیه

1. از شتر استفاده کنید: React از Camelcase برای نام رویداد استفاده می کند ، مانند onClick به جای onclickبشر

2. رویدادهای مصنوعی: وقایع موجود در React در یک بسته بندی مرورگر متقاطع به نام رویدادهای مصنوعی پیچیده شده است ، که تضمین می کند کد شما در مرورگرهای مختلف یکسان کار می کند.

3. استدلال های تصویب: شما می توانید به راحتی با استفاده از توابع فلش یا موارد آرگومان را به دستگیرندگان رویداد منتقل کنید bind روش

مثال: روی رویداد کلیک کنید

بیایید با یک مثال ساده شروع کنیم:

import React from "react";

function ClickButton() {
  const handleClick = (message) => {
    alert(message);
  };

  return (
    <button onClick={() => handleClick("Button Clicked!")}>Click Mebutton>
  );
}

export default ClickButton;

در اینجا ، ما از یک تابع فلش برای انتقال یک پیام سفارشی به handleClick هنگام کلیک بر روی دکمه عملکرد.

رسیدگی به چندین رویداد

همچنین می توانید گیرنده های رویداد مختلف را به عناصر مختلف وصل کنید. در اینجا یک مثال آورده شده است:

function MultiEventHandler() {
  const handleMouseEnter = () => {
    console.log("Mouse entered");
  };

  const handleMouseLeave = () => {
    console.log("Mouse left");
  };

  return (
    <div
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      style={{ padding: "20px", backgroundColor: "lightblue" }}
    >
      Hover over this box
    div>
  );
}

این کد بسته به اینکه ماوس وارد جعبه می شود پیام های مختلفی را به کنسول وارد می کند.

ارائه مشروط در React

ارائه مشروط به شما امکان می دهد تا بر اساس شرایط خاص ، مانند تعامل کاربر یا وضعیت برنامه ، قسمت هایی از UI خود را نشان دهید یا پنهان کنید. React چند روش برای رسیدگی به این کار ارائه می دهد.

با استفاده از if بیانیه ها

ساده ترین راه استفاده از یک if بیانیه:

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome back!h1>;
  }
  return <h1>Please log in.h1>;
}

با استفاده از اپراتورهای سه گانه

برای منطق کوتاه تر ، می توانید از یک اپراتور سه گانه استفاده کنید:

function Greeting({ isLoggedIn }) {
  return isLoggedIn ? <h1>Welcome back!h1> : <h1>Please log in.h1>;
}

با استفاده از && عملگر

اگر می خواهید به طور مشروط چیزی را بدون آن نمایش دهید else مورد ، منطقی && اپراتور مفید است:

function Notification({ hasUnreadMessages }) {
  return (
    <div>
      <h1>Hello!h1>
      {hasUnreadMessages && <p>You have unread messages.p>}
    div>
  );
}

این فقط پیام را نشان می دهد اگر hasUnreadMessages است ، trueبشر

قرار دادن همه اینها

در اینجا مثالی برای ترکیب رسیدگی به رویداد و ارائه مشروط وجود دارد:

import React, { useState } from "react";

function LoginToggle() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const toggleLogin = () => {
    setIsLoggedIn((prevState) => !prevState);
  };

  return (
    <div>
      <h1>{isLoggedIn ? "Welcome Back!" : "Please Log In"}h1>
      <button onClick={toggleLogin}>
        {isLoggedIn ? "Log Out" : "Log In"}
      button>
    div>
  );
}

export default LoginToggle;

در این مثال ، با کلیک بر روی دکمه تغییر می کند isLoggedIn حالت ، که متن تبریک و دکمه را بر این اساس به روز می کند.

نکاتی برای موفقیت

1. دستگیرندگان را ساده نگه دارید: اگر منطق رویداد شما پیچیده است ، آن را به یک عملکرد جداگانه منتقل کنید تا اجزای خود را تمیز نگه دارید.

2. از عملکردهای بیش از حد درون خطی خودداری کنید: توابع درون خطی در اعتدال خوب است ، اما برای اجزای به روز شده ، آنها می توانند بر عملکرد تأثیر بگذارند.

3. نامهای توصیفی: برای دستگیره های رویداد و متغیرهای حالت خود از نامهای شفاف و توصیفی استفاده کنید.

4. مدیریت دولت: برای کنترل منطق رندر مشروط خود به طور موثر از حالت استفاده کنید.

در ارتباط باشید

نکات و آموزش های واکنش بیشتری می خواهید؟ در اینجا چگونه می توانید در حلقه بمانید:

عضویت ساده ترین راه برای پیشبرد و دریافت بینش های منحصر به فرد برای کمک به شما در یک Pro React است. بیایید با هم چیزی شگفت انگیز بسازیم!