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

Дээд түвшингийн компонент гэж юу болох тэдгээрийг хэрхэн үүсгэн ашиглахыг авч үзье. Үүний тулд төслийн 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 хичээлийн багцыг судлахыг зөвлөе.

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

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

Техник технологийн хөгжлийн үрээр бүхий л зүйл өөрчлөгдөн шинэчлэгдэж байдаг. Энэ үзэгдэл мэдээллийн технологийн салбарт бүр ч илүү хурдтай явдагийг бүгд мэднэ. Иймээс энэ салбарт ажиллаж буй мэрэгжилтэнүүд болон ажиллахаар бэлтгэгдэж байгаа залуусын хамгийн эхний зорилт бол хөгжлөөс хоцрохгүй байх юм. Сүүлийн жилүүдэд javascrip хэл маш хурдацтай хөгжин түүнийг програм зохиох ажилд улам өргөнөөр ашиглах болсон тул хэлийг сурч хөгжилтэй нь хөл нийлүүлэхэд туслах зорилгоор ES6 хэлний циклд шинээр нэмэгдсэн зүйлийн талаар энэ хичээлээр үзье.

Циклийн боломжийг дараах

const array = [1, 2, 3, 4, 5];

массиваар авч үзье. Дээрх массивын элементүүдийг консолд гаргахад өмнө хоёр аргыг ашиглаж болдогийн нэг бол for циклийг

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

useMemo хукийн судалгааг

import React, {useState} from 'react'

function App() {
  const [number, setNumber] = useState(40)
 
  return (
      <div className="container">
        <h1>Тооцоологдох шинж: {number}</h1>
        <button className={'btn btn-success mx-3'} onClick={() => setNumber(prev => prev + 1)}>Нэмэх</button>
        <button className={'btn btn-danger'} onClick={() => setNumber(prev => prev - 1)}>Хасах</button>
      </div>
  );
}

export default App;

код дээр харцгаая. useState -ээр 40 гэсэн анхны утгатай number хувьсагчийг үүсгээд хуудаст h1 гарчигаар number хувьсагчийн утгыг харуулаад Нэмэх, Хасах хоёр товч дээр дарахад setNumber функцээр number хувьсагчийн утгыг өөрчилнө. Кодийг ажлуулбал

хуудас нээгдэнэ.

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

Javascript хэлний үндсэн үүргийн нэг бол хэрэглэгч талын хуудаст динамик байдлыг үүсгэн програмтай харьцах ажиллагааг илүү уян хатан, хөнгөн, эвтэйхэн болгох юм. Html хуудас дээрх сонголтуудаас боломжит сонголтуудыг хийхдээ CheckBox элементийг ашигладаг бол сонголтуудаас боломжит нэгийг сонгохыг Радио товчоор хийдэг. Жишээ нь бүртгэлийн хуудаст хэрэглэгчийн хүйсийн сонголтыг хийх гэх мэт. Үүнийг VueJs -дээр checkbox -той төстэйгөөр хэрэгжүүлдэг тул CheckBox хичээлийн

<template>
  <div>
    <h2>Form inputs</h2>
    <label>
      <input type="radio"> instagram
    </label>
    <label>
      <input type="radio"> twitter
    </label>    
    <label>
      <input type="radio"> facebook
    </label>    

  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

жишээний input тегийн төрлийг radio болгоод програмыг ажлуулан хуудасны ажиллагааг шалгавал

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

Бид Дадлага. /Төсөл үүсгэх/ хичээлээр өмнөх хичээлүүдэд үзсэн онолын мэдлэгээ батагах үүднээс төслийг үүсгэсэн. Одоо дадлагын төслийн зохион байгуулалтыг хариуцах суурь компонентийг үүсгэе. Энэ компонент сайтад үзүүлэх хуудасны бүх элементүүдийг багцлан агуулах юм. Энэхүү суурь компонент бусад компонентуудийг багцлах тул дээд түвшингийн компонент гэж үзэж болно.

Цэсийг нээх хаах ажиллагааг хариуцах компонентийг боловсруулсан тул энэ хичээлээр програмийн удирдах цэсийг…

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

 

Математикийн үйлдлүүдэд нэг ба тэг тоонууд онцгой шинжүүдтэй. Үржих үйлдэлд нэг ба тэг

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

 

Давталт (Iterator) паттерн нийлмэл обьектын бүх элементүүдэд тэдгээрийн дотоод бүтцийг задлахгүйгээр хандах абстракт интерфейсийг тодорхойлдог. C# хэл дээр…

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

 

Тодорхой нөхцөлд жишээ нь тоог тэгд хуваах гэх мэт тохиолдолд систем өөрөө онцгой нөхцлийн генерацийг хийдэг. Гэхдээ C#

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

 

Програмийг удирдах цэсийг нээх болон хаах ажиллагааг хариуцах компонентийг боловсруулъя. Үүний тулд төслийн components хавтаст Navigation хавтасыг үүсгээд…

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

 

Арифметикийн үндсэн 4 үйлдлийн нэг бол үржих. Нэмэх , хасах үйлдлийн талаар…

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

 

Шаблоны арга (Template Method) хэв дэд классуудад алгоритмын бүтцийг өөрчлөхгүйгээр зарим алхамуудыг дахин тодорхойлох боломж олгосон ерөнхий алгоритмыг…

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

 

Гурвалжны медиантай холбоотой бодлогууд шалгалт шүүлэгт ихээр орж ирдэг. Иймээс гурвалжны медиан, түүний шинжүүдийг бүрэн мэддэг байх хэрэгтэй.

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

 

Бүх онцгой нөхцлүүдийн суурь бол Exception төрөл. Төрөлд онцгой нөхцлийн талаарх мэдээллийг авч болох хэдэн шинжийг тодорхойлсон байдаг.…

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

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

бол b, c, d -г ол.

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

 

|5x+4|=10 тэгшитгэлийг бод.

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

 

илэрхийллийн утгыг ол.

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