Дээд түвшингийн компонентууд

Дээд түвшингийн компонент гэж юу болох тэдгээрийг хэрхэн үүсгэн ашиглахыг авч үзье. Үүний тулд төслийн Car компонентийн кодийг дараах байдлаар

import React from "react";
import styles from "./Car.module.css";

class Car extends React.Component {
  render() {
    const inputClasses = [styles.input];

    if (this.props.name !== "") {
      inputClasses.push(styles.green);
    } else {
      inputClasses.push(styles.red);
    }

    if (this.props.name.length > 5) {
      inputClasses.push(styles.bold);
    }

    return (
      <div className={styles.Car}>
        <h3>Машиний нэр: {this.props.name}</h3>
        <p>
          Он: <strong>{this.props.year}</strong>
        </p>
        <input
          type="text"
          onChange={this.props.onChangeName}
          value={this.props.name}
          className={inputClasses.join(" ")}
        />
        <button className={styles.btn} onClick={this.props.onDelete}>
          Устгах
        </button>
      </div>
    );
  }
}

export default Car;

өөрчилье.

Компонентийн кодоос өмнө үзсэн сэдвүүдтэй холбоотой хэсгүүдийг хассан байгаа. Харин inline хэвжүүлэлтийн хэсгийг Car.module.css файлд

.Car {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  display: block;
  padding: 10px;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14);
  border-radius: 5px;
  transition: border 1s, box-shadow 0.5s;
}

.Car:hover {
  border: 1px solid blue;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.input {
}

.input:active,
input:focus {
  outline: none;
}

.input.green {
  border: 1px solid green;
}

.input.red {
  border: 1px solid red;
}

.input.bold {
  border: 2px solid green;
  font-weight: bold;
}

.btn {
  color: yellowgreen;
}

оруулан өгсөн. Кодийн өөрчлөлтийг хийгээд програм хэвийн ажиллаж байгааг

шалган үзээрэй. Бүгдийг зөв хийсэн бол TOOGLE CAR товчийг дарахад Car компонент ажиллан машинуудын жагсаалтыг үзүүлэх ёстой.
Өөрчлөлтийн дараа Car компонентод машиний мэдээллийг хүрээ бүхий хэсэгт хэвжүүлэн үзүүлэх <div className={styles.Car}> тег байгаа нь тодорхой харагдана. Үнэн хэрэгтээ энэ div компонентод ямар нэгэн функционал үүрэггүй тул машиний мэдээллийн хэвжүүлэлтийн үүргийг хөндөлгүй үлдээвэл үүнийг хасаж болохоор. Тэгвэл дээд түвшингийн компонент гэсэн ойлголтыг ашиглан асуудлыг шийдэх гэж үзье.
Дээд түвшингийн компонентуудыг өмнөх хичээлүүдэд ашиглаж байсан Жишээ нь ErrorBoundary хичээлд үүсгэсэн

import React from 'react'

export default class ErrorBoundary extends React.Component {
  state = {
    hasError: false
  }

  componentDidCatch(error, info) {
    this.setState(
      { hasError: true })
  }

  render() {
    if (this.state.hasError) {
      return <h2 style={{ color: 'red' }}>Алдаа гарлаа</h2>
    }
    return this.props.children
  }
}

ErrorBoundary классийг аваад үзье. Дээд түвшингийн ErrorBoundary компонентийн гол зорилго бол алдаа гарсан бол мэдээлэл үзүүлэх эсрэг тохиолдолд props -оор дамжин ирсэн компонентийг багцлан /боох/ өгөх юм. Дээд түвшингийн компонентуудын зорилго бол функционал ажиллагааг нэмэхээс өөрөө ямар нэгэн зүйлийг үзүүлдэггүйд оршино.
Өөр жишээ бол Фрагмент хичээлд үүсгэсэн

const Auxiliary = (props) => {
  return props.children
}

export default Auxiliary

props -оор дамжин ирсэн компонентийг өөртөө багцлаад буцаах Auxiliary компонент. Дээрх жишээнүүдээс дүгнэвэл props -оор дамжин ирсэн компонентийг өөртөө багцлаад буцаах  дээд түвшингийн компонентийг ашиглах нэг аргачлал байгаа нь тодорхой.
Энэ удаад  дээд түвшингийн компонентийг хэрэгжүүлэх өөр аргачлалыг авч үзье. Үүний тулд төслийн hoc хавтаст

import React from "react";

const withClass = (Component, className) => {
  return (props) => (
    <div className={className}>
      <Component />
    </div>
  );
};

export default withClass;

агуулгатай withClass.js файлыг үүсгэе. Энд бид стандарт компонент үүсгэхгүйгээр багцлагч функцийг үүсгэсэн учраас файлын нэрийг жижиг үсгээр эхэлсэнг анхаарна уу. Функцэд Component, className параметрүүдийг аваад компонентийг тодорхой класс бүхий div -д боон буцаах функцийг агуулах withClass нэртэй тогтмолыг тодорхойлоод түүнийг анхдагчаар экспортолсон байгаа.
Одоо Car компонентийг withClass -ийг ашиглан

import React from "react";
import styles from "./Car.module.css";
import withClass from "../hoc/withClass";

class Car extends React.Component {
  render() {
    const inputClasses = [styles.input];

    ...

    return (
      <>
        <h3>Машиний нэр: {this.props.name}</h3>
        <p>
          Он: <strong>{this.props.year}</strong>
        </p>
        ...
      </>
    );
  }
}

export default withClass(Car, styles.Car);

гэж өөрчилөн бичье. Өөрчлөлтөөр withClass -ийг импортлон аваад машиний мэдээллийг хэвжүүлэн үзүүлэх <div className={styles.Car}> тегийг фрагментаар солиод экспортийг export default withClass(Car, styles.Car); болгон өөрчилсөн байгаа. withClass бол компонент болон классийн нэрийг параметрээр аваад компонентийг тодорхой класс бүхий div -д боон буцаах ердийн функц тул Car компонентоос анхдагчаар экспортлох компонентийг withClass функцэд дамжуулж болно. Бусад кодод өөрчлөлт ороогүй тул ... гэж хаасан байгаа. npm start командаар төслийг ажлуулаад машиний мэдээллийг харах гэвэл

Car компонентийн 15-р мөр буюу

    if (this.props.name.length > 5) {
      inputClasses.push(styles.bold);
    }

хэсэгт алдаа өгнө. Бид withClass функцэд Car компонент болон түүнийг хэвжүүлэх классийг дамжуулсан ч Car компонентийн опциуд буюу пропсуудийг дамжуулаагүй учраас алдаа өгөх нь зүйн хэрэг. Одоо Car компонентийн опциуд буюу пропсуудийг дамжуулах хэрэгтэй болсон. App компонентоос Car компонентийг

            <Car
              name={car.name}
              year={car.year}
              onDelete={this.deleteHandler.bind(this, index)}
              onChangeName={(event) => this.onChangeName(event.target.value, index)}
            />

дуудаж буй хэсэгт заагдсан опциуд Car компонентод props параметрээр дамжин ирдэг бөгөөд тэдгээрийг бид Car компонентод ашигласан нь кодоос ойлгомжтой. React сан компонентууд хооронд props -оор опциудыг автоматаар дамжуулдаг тул withClass функцэд дамжин ирсэн props -ийг ES6 -гийн spread (...) оператороор

const withClass = (Component, className) => {
  return (props) => (
    <div className={className}>
      <Component {...props} />
    </div>
  );
};

export default withClass;

Car компонентийн опциудийг дамжуулж болно. Одоо төслийн компиляцийг хийгээд машиний мэдээллийг харвал

алдаа өгөхгүй бүгд хэвийн ажиллана. Машиний мэдээллийн Car компонентийг хөтөчийн Inspect цонхноос харвал өмнөхтэй ижил хэвжүүлэлт бүхий div -д багцлагдсан байгаа нь харагдана. withClass функц яг ажиллаж байгаад итгэхийн тулд компонентийг боож байгаа div -ийг section -ээр солин шалгаж үзсэн ч болно.
Эндээс дээд түвшингийн компонентууд хоёр төрлийн байж болох бөгөөд тэдгээрийн үндсэн үүрэг нь өөр компонентуудыг багцлан тэдгээр тодорхой ажиллагаануудыг нэмэн оруулах юм гэж дүгнэж болно. Дээд түвшингийн компонентуудыг React -ийн ердийн компонент эсхүл функц байдлаар хийж болохыг сурлаа.

Санамж: Та react сангийн талаар тодорхой мэдлэгтэй бол хичээлийн материалыг төвөггүй ойлгоно. Харин react -ийг судлаж эхэлж байгаа бол хичээлийг ойлгохын тулд React JS хичээлийн багцыг судлахыг зөвлөе.

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

  Нээгдсэн тоо: 1397 Бүртгүүлэх

Хичээлээр Vuejs -ийг ашиглан энгийн програмыг зохиоё. Үүний тулд Vuejs -ийн албан ёсны сайтад хандан GET STARTED цэсээр ороод хуудасны зүүн талын цэсээс Installation цэсийг сонговол

Vuejs -ийг суулгах аргуудын талаар дэлгэрэнгүй тайлбарласан хуудас нээгдэнэ. Vuejs бага хэмжээтэй энгийн фреймворк учраас түүнтэй ажиллахын тулд олон тооны тохиргоонууд хийн ажиллах орчинг бүрдүүлээд байх хэрэггүй кодод javascript санг оруулдагийн адилаар нэг script тэг ашиглан Vuejs -ийг оруулаад түүнийг ашиглах боломжтой. Vuejs -ийг ашиглах хамгийн энгийн ойлгомжтой арга бол CDN -ээс санг script тэгээр коддоо оруулан ирэх юм. Бид фреймворкийн ажиллагааг судлах гэж байгаа тул <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> мөрийг хуулан аваад дурын текст засварлагчийг нээгээд index.html файлыг доорх агуулгатайгаар

үүсгэн өгье.

  Нээгдсэн тоо: 457 Нийтийн

Програмийн кодчлолийг тусгайлан заалгаж сурдаг зүйл биш. Ямарч зүйлийг өөрөө бие даан сурах боломжтой. Энэ талаар Бие даан сурах нийтлэлийг үзээд эрэгцүүлэн бодоорой. Энэ удаад Input талбарын боловсруулалтын талаар судлая.

Өмнөх хичээлүүдэд хуудасны элементүүдэд үйл явцын сонсогчийг тавин, түүнд параметр дамжуулан хүлээн авах аргуудыг сурсан. Энэ хичээлээр Input талбарт үүссэн үйл явцыг хэрхэн боловсруулахыг судлая. Үүний тулд App компонентийн h1 гарчигийн доор input талбарыг

      <div style={divStyle}>
        <h1>
          {this.state.pageTitle}
        </h1>
        <input type="text"/>
        <button onClick={this.changeTitleHandler.bind(this, 'App өөрчлөлт')}>Гарчиг өөрчлөх</button>

оруулан өгөөд хөтөч дээрх хуудсаа харвал

  Нээгдсэн тоо: 680 Бүртгүүлэх

Энэ хичээлд стримийг үүсгэж болдог RxJs сангийн Promise /промис/ бүтцийн талаар авч үзье. Promise үгийн орчуулгыг мэдэхгүй тул промис гээд явах нь илүү. Промис JavaScript -ын ES6 хувилбарт бий болсон асинхрон кодтой ажиллахад их эвтэйхэн бүтэц юм. RxJs нь JavaScript -ын хэрэгслүүдийг илүү сайжруулсан сан тул бид програмдаа промисоос стримийг үүсгэх боломжтой. Промисын талаарх мэдлэгээ сэргээхийн тулд index.js файлд бидэнд ямар нэгэн промис үүсгэн өгөх

function delay(ms = 1000) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve();
        }, ms);
    });
}

  Нээгдсэн тоо: 366 Төлбөртэй

Динамик жагсаалттай ажиллах боломжуудын тухай авч үзье. Манай хичээлийн програм App, Car компонентуудтай болоод байгаа.

App компонентийн Toogle car товч машиний мэдээллийн жагсаалтыг нээх, хаах ажиллагааг хийх бол Car компонентийн Дарах товчоор App компонентод h1 гарчигаар үзүүлж буй текстийг машиний нэрээр сольдог. Динамик жагсаалттай ажиллах практик болгон програмд Car компонентийн Дарах товчийг input -ээр солиод input -д оруулсан мэдээллээр Car компонентоос машиний нэрийг өөрчлөх машиний мэдээллийг жагсаалтаас хасах ажиллагаануудыг хэрэгжүүлье.

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 132

 

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 194

 

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

Нээгдсэн тоо : 197

 

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 218

 

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 216

 

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 296

 

Хуваах нь нэг тоо нөгөө тоонд хэдэн удаа агуулагдаж буй тодорхойлох арифметикийн үйлдэл.
Хуваалтыг нэг бус удаа…

Нээгдсэн тоо : 225

 

Зуучлагч (Mediator) нь олон тооны обьектууд бие биетэйгээ холбоос үүсгэхгүйгээр харилцан ажиллах боломжийг хангах загварчлалын хэв юм. Ингэснээр…

Нээгдсэн тоо : 219

 

Делегатууд хичээлд ухагдхууны талаар дэлгэрэнгүй үзсэн ч жишээнүүд делегатийн хүчийг бүрэн харуулж чадахааргүй байсан.…

Нээгдсэн тоо : 222

 
Энэ долоо хоногт

функц өгөгдөв.

  1. f(x) функцын x0=5 абсцисстай M цэгт татсан шүргэгч шулууны тэгшитгэл
  2. f(x) функцын график, дээрх шүргэгч шулуун болон координатын тэнхлэгүүдээр хүрээлэгдсэн дүрсийн талбай  
  3. f(x) функцын графикийг M цэгт шүргэх, төв нь OX (абсцисс) тэнхлэг дээр орших тойргийн тэгшитгэл

Нээгдсэн тоо : 2836

 

20 хувийн концентрацитай 18 гр уусмал дээр концентрацийг нь 4 хувиар нэмэгдүүлэхийн тулд 26 хувийн концентрацитай хичнээн грамм уусмал нэмж хийх шаардлагтай вэ?

Нээгдсэн тоо : 1272

 

тэгшитгэлийн шийдийг ол.

Нээгдсэн тоо : 1387