Фрагмент

React компонентоос хэд хэдэн элементүүдийг буцаах нь ердийн үзэгдэл ч тэдгээрийг заавал нэг суурь элементэд багцалсан байх дүрэмтэй. Энэ дүрэм нь зарим тохиолдолд DOM -д илүү зангилаа /элемент/ үүсгэдэг асуудлыг React 16 хувилбараас фрагментээр солин шийдвэрлэсэн. Фрагмент гэдгийг ойлгохын тулд төслийн кодод багахан өөрчлөлтийг хийе. ErrorBoundary классийн ажиллагааг шалгах зорилгоор Car компонентод нэмэн өгсөн

     if (this.props.name === 'Toyata Prius') {
       throw new Error('Алдаа гарлаа !!!')
     }

кодийг хасвал програм TOGGLE CAR товч дээр дарахад алдаа хаялгүй хэвийн ажиллана.

Материалыг бүртгэлтэй хэрэглэгч үзнэ.

how_to_regБүртгүүлэх

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

Холбоотой материалууд
Функцэд параметр дамжуулах

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

React -д үйл явцыг хэрхэн боловсруулах талаар гүнзгийрүүлэн судлая. Үүний тулд Car компонентийн кодод Дарах нэртэй товчийг

import React from 'react'

const car = props => <div>
  <h3>Машиний нэр: {props.name}</h3>
  <p>Он: <strong>{props.year}</strong></p>
  <button>Дарах</button>
</div>

export default car

нэмэн өгөөд хуудсаа харвал

гэж харагдана.

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

Формтой ажиллах модел

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

Хэрэглэгч програмын өгөгдөлтэй харьцах ажиллагаа бол ямарч програмыг хувьд чухал хэсэг байдаг. Үүнийг голдуу формоор дамжин хийдэг. Иймээс энэ удаа VueJs -ээр төрөл бүрийн input элементүүдтэй хэрхэн ажиллахыг

    <body>
        <div id="app">
            <input type="text">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {

                }
            })
        </script>
    </body>

кодоор авч үзье. Кодод хэрэглэгчээс өгөгдөл авах input элемент div id="app" элементэд Vue -гийн хувийн инициализац хийсэн байгаа. Хуудсыг нээвэл ердийн input талбар л үзэгдэнэ. Тэгвэл input элементэд ямар нэгэн зүйлийг оруулахад түүнийг хуудасны шаблонд шууд харуулах асуудлыг шийдье.

Үйл явдал (event)

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

Үйл явдал (events) – гэдэг нь хэрэглэгчийн үйлдлийн үр дүнд хуудас болон цонхны байдалд гарсан өөрчлөлтийг мэдэгдэхийг хэлнэ. Хэрэглэгч хуудастай ажиилах явцад эсвэл  хуудасны төлөвт өөрчлөлт гарах үед үйл явдал буюу event үүснэ. Энэ нь хулганыг хөдөлгөх, хулганы товч дээр дарах, гараас текст оруулах зэрэг байж болно. Хуудасны төлөвт өөрчлөлт гарах гэдэгт хуудас, обьект эсвэл зураг ачааллах, хуудас дээр алдаа гарах, нэг элементээс нөгөө элементэд фокус шилжих гэх мэт байж болно.

DOM обьектын тухай

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

DOM (Document Object Model) буюу хуудасны обьектын модел гэдгийг хуудсыг тегүүдийн мод хэлбэрээр зохион байгуулах гэж ойлгоход болно. DOM модельд хуудастай хэрхэн ажиллахыг ойлгох явдал бол Javascript программчлалын үндсэн суурь байдаг. Javascript хэлний ихэнх үйлдлүүд HTML хуудастай голлон ажилладаг. Иймд Javascript -ын программ веб хуудастай ажиллана гэдгийг DOM той ажиллах гэж л ойлгоорой. Хуудастай ажиллах ямарч үйлдэл DOM -ын тохирох аргыг л дуудах юм.
DOM-моделоор хуудсыг үелэл гэж ойлгоно. HTML тэг болгон тусдаа зангилаа буюу мөчир элементийг үүсгэдэг. Үүнийг жишээн дээр авч үзвэл ойлгомжтой.

Энгийн DOM

Эхлээд доорх хуудасны DOM -ыг авч үзье.

<html>
    <head>
        <title>Гарчиг</title>
    </head>
    <body>
        Хуудасны бие
    </body>
</html>

Хамгийн гадна талын тег бол <html> тул түүнээс мод ургаж эхэлнэ. <html> -ийн дотор <head>, <body> гэсэн хоёр зангилаа байгаа тул эдгээр нь дараагийн зангилаа буюу <html> -ийн мөчир болно.

Статик гишүүд…

Класс ба структурт ердийн талбар, арга, шинжүүдээс гадна статик талбар, арга, шинжүүд байж болдог. Статик талбар, арга, шинжүүд…

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

 
useRef

Хичээлээр useState -тэй тун төстэй useRef хукийн талаар авч үзье. useRef хукийн онцлог ашиглалтыг компонент хэдэн удаа дахин…

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

 
Тоог ихэсгэх

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

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

 
Графикийн паттерн.…

Нийтлэлээр графикийн хэвүүдийн /GUI pattern/ түүхийг авч үзье. Боловсруулалтын графикийн хэвүүдийг 30 гаруй жилийн туршид боловсруулж байгаа бөгөөд…

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

 
Аргын хэт…

Хааяа өөр өөр параметрүүдийн багцтай нэг аргыг үүсгэх шаардлага гардаг. Ирсэн параметрүүдээс хамааран аргын тодорхой хэрэгжүүлэлтийг хэрэглэнэ. Ийм…

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

 
Vuex -ийг…

Ямарч програмын ажиллагааны чухал хэсэг бол төрөл бүрийн мэдээллийн боловсруулалт, тэдгээртэй ажиллахтай холбоотой байдаг. Иймээс энэ хичээлээс vuejs…

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

 
useEffect

Хичээлээр react -ийн хукуудаас их өргөн ашиглагддаг useEffect -ийн талаар авч үзье. useEffect -ийн ажиллагааг судлах хуудасны кодийг

…

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

 
Тоон болон…

Илэрхийлэл бол математикийн хэлний үндэс болсон суурь ойлголтуудын нэг. Математикийн илэрхийллийг тооцооны алгоритм, аксиом, теорем, бодлогын нөхцлүүд гээд…

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

 
Програмчлалын хэвүүд…

Програм зохиох бол нарийн төвөгтэй ажил. Ямар ч програмын хувьд өөрийн хийх ажлаа гүйцэтгэхийн чацуу цаашдаа хөгжих, ажлын…

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

 
© 2014 Зохиогчийн эрхээр хамгаалагдсан. Холбогдох