در حال بارگزاری ...

ایجاد یک کامپوننت Navbar در React

توسط الهام غایب
آخرین به روز رسانی شنبه 15 آذر 1399

در این پست از لیداوب می‌خواهیم یک کامپوننت Navbar به اپلیکیشنی که با React ساخته‌ایم، اضافه کنیم. برای یادگیری ساخت این کامپوننت همراه ما باشید. در طی این فرآیند باید کمی refactoring انجا

در این پست از لیداوب می‌خواهیم یک کامپوننت Navbar به اپلیکیشنی که با React ساخته‌ایم، اضافه کنیم. برای یادگیری ساخت این کامپوننت همراه ما باشید.


در طی این فرآیند باید کمی refactoring انجام دهیم تا حالت local را از کامپوننت‌های فرزند به کامپوننت‌های والد تغییر دهیم. با پیروی از این قاعده باید رویدادهایی را در کامپوننت‌های فرزند ایجاد کنید و در عین حال آن‌ها را در کامپوننت والد مدیریت و اجرا کنیم. این کار به اپلیکیشن ما اجازه می‌دهد تا یک منبع حقیقی و واحد داشته باشد. به عبارت دیگر، مولفه‌های مختلفی ممکن است براساس داده‌های متغیر، به روز رسانی را منعکس کنند.

ایجاد یک کامپوننت Navbar در React

افزودن فایل کامپوننت Navbar

ابتدا، می‌توانیم یک فایل navbar.jsx به پوشه کامپوننت‌هایی که روی آن‌ها کار می‌کردیم، اضافه کنیم:

ایجاد یک کامپوننت Navbar در React

در کامپوننت Navbar می‌توانیم کد زیر را اضافه کنیم. توجه داشته باشید که ما از اشیاء props برای واکشی تعداد کل آیتم‌ها در اپلیکیشن استفاده می‌کنیم. بنابراین، می‌توانیم آن‌ها را در ناحیه راهبری نمایش دهیم:

import React, { Component } from "react";

class NavBar extends Component {
  render() {
    return (
      <React.Fragment>
        <nav className="navbar navbar-dark bg-dark mb-3">
          <a className="navbar-brand" href="#">
            <h1>Total Items <span className="badge badge-secondary">{this.props.totalItems}</span></h1>
          </a>
        </nav>
      </React.Fragment>
    );
  }
}

export default NavBar;

پیکربندی مجدد برای استفاده از App.js

می‌خواهیم به عقب برگردیم تا از App.js به عنوان کامپوننت اصلی در اپلیکیشن استفاده کنیم. برای این کار، می‌توانیم انطباقی در index.js ایجاد کرده تا را به جای رندر کنیم:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import "bootstrap/dist/css/bootstrap.css";

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

بالا بردن وضعیت در React

در زمان کار در React گاهی می‌شنوید که وضعیت باید بالا برده شود. مستندات React این مفهوم را به این صورت توصیف می‌کنند، «گاهی، چندین کامپوننت باید داده‌های متغیر یکسانی را منعکس کنند. ما بالا بردن وضعیت مشترک را به نزدیک‌ترین نیای مشترک آن‌ها را توصیه می‌کنیم». حالا در عمل این روش را مشاهده می‌کنیم.

در مورد ما، این توصیف یعنی می‌خواهیم آرایش اپلیکیشنی زیر را داشته باشیم که وضعیت جدید در کامپوننت بالاترین سطح اپلیکیشن قرار بگیرد:

ایجاد یک کامپوننت Navbar در React

برای این کار، باید تمام کامپوننت‌های فرزند را اصلاح کنیم تا وضعیت آن‌ها را به درون کامپوننت اپلیکیشن انتقال دهیم. کامپوننت اپلیکیشن ما را مشاهده کردید. در بالاترین قسمت، وضعیت مشترک وجود دارد، سپس مدیریت کننده‌های رویداد را داریم و در آخر متد ()render را مشاهده می‌کنیم. برای اضافه کردن سایر موارد از متد ()reduce در جاوا اسکریپت استفاده می‌کنیم:

import React, { Component } from "react";
import NavBar from "./components/navbar";
import Items from "./components/items";
import "./App.css";

class App extends Component {
  state = {
    items: [{ id: 1, value: 0 }, { id: 2, value: 0 }, { id: 3, value: 0 }]
  };

  handleIncrement = item => {
    const items = [...this.state.items];
    const index = items.indexOf(item);
    items[index] = { ...item };
    items[index].value++;
    this.setState({ items });
  };

  handleReset = () => {
    const items = this.state.items.map(i => {
      i.value = 0;
      return i;
    });
    this.setState({ items });
  };

  handleDelete = itemId => {
    const items = this.state.items.filter(item => item.id !== itemId);
    this.setState({ items: items });
  };

  render() {
    return (
      <React.Fragment>
        <NavBar
          totalItems={this.state.items.reduce((prev, cur) => {
            return prev + cur.value;
          }, 0)}
        />
        <Items
          onReset={this.handleReset}
          onDelete={this.handleDelete}
          onIncrement={this.handleIncrement}
          items={this.state.items}
        />
      </React.Fragment>
    );
  }
}

export default App;

مولفه های  تغییر یافته فرزند

از آنجایی که همه وضعیت‌ها و منطق به بالاترین سطح کامپوننت اپلیکیشن برده شده است، کامپوننت‌ها اکنون ساده‌تر شده‌اند. در واقع، آن‌ها دیگر هیچ وضعیت لوکالی ندارند. اگر لازم باشد آن‌ها با داده‌ها سر و کار داشته باشند، باید آن را با اشیاء props به دست آورد. علاوه بر این، به برای به روز رسانی داده‌ها، رویدادها در کامپوننت فرزند ایجاد شده و در کامپوننت والد مدیریت و اجرا می‌شوند:

import React, { Component } from "react";
import Item from "./item";

class Items extends Component {
  render() {
    return (
      <React.Fragment>
        <button
          onClick={this.props.onReset}
          className="btn btn-success btn-lg m-3"
        >
          Reset All
        </button>
        {this.props.items.map(item => (
          <Item
            key={item.id}
            onDelete={this.props.onDelete}
            onIncrement={this.props.onIncrement}
            item={item}
          />
        ))}
      </React.Fragment>
    );
  }
}

export default Items;

Item.jsx

import React, { Component } from "react";

class Item extends Component {
  render() {
    return (
      <React.Fragment>
        <div className="card mb-2">
          <h5 className={this.styleCardHeader()}>{this.styleCount()}</h5>
          <div className="card-body">
            <button
              onClick={() => this.props.onIncrement(this.props.item)}
              className="btn btn-lg btn-outline-secondary"
            >
              Increment
            </button>

            <button
              onClick={() => this.props.onDelete(this.props.item.id)}
              className="btn btn-lg btn-outline-danger ml-4"
            >
              Delete
            </button>
          </div>
        </div>
      </React.Fragment>
    );
  }

  styleCardHeader() {
    let classes = "card-header h4 text-white bg-";
    classes += this.props.item.value === 0 ? "warning" : "primary";
    return classes;
  }

  styleCount() {
    const { value } = this.props.item;
    return value === 0 ? "No Items!" : value;
  }
}

export default Item;

عملکرد وضعیت مشترک

حالا وقتی با اپلیکیشن تعامل می‌کنیم متوجه وجود مفاهیمی در آن می‌شویم. کلیک کردن روی دکمه افزایشی روی هر آیتم، به تعداد هر آیتم اضافه می‌کند. علاوه بر این، کامپوننت Navbar حالا توالی مجموع تمام آیتم‌ها را حفظ می‌کند. در نهایت، می‌توانیم روی یک دکمه کلیک کنیم تا تمام شمارنده‌ها را به صفر برگردانیم.

مقالات تخصصی بیشتر در لیداوب:

با سایر مقالات تخصصی و آموزشی ما در کتابخانه‌ آنلاین لیداوب، می‌توانید گامی بلندتر در آموزش طراحی سایت بردارید. می‌توانید نظرات و پیشنهادات خود را در بخش کامنت‌ها با ما در میان بگذارید.

دیدگاه ها

دیدگاه ها : 0


متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

رایگان

اشتراک گذاری در
سورس خرید و فروش ارزهای دیجیتال
ثبت امتیاز
2.3 (3 رای)

   لطفا صبر کنید ...