Компонентод параметр дамжуулах

Өмнөх хичээлүүдэд бид react -ийг нилээд сайн судлан энгийн төслийг үүсгэн ажлуулж сурсан. Одоо react компонентуудийн талаар цааш гүнзгийрүүлэн судлах цаг болсон. Хичээлээр Component классаас удамшсан класс хэлбэрээр үүсгэгдсэн компонентод параметр дамжуулахыг авч үзье. Үүнийг төслийн App компонент дээр харцгаая. App компонентийг index.js файлд

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

ReactDOM сангийн render аргаар DOM -д оруулан өгч байгаа.

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

ReactDOM.render(
  <React.StrictMode>
    <App title={'Компонентийн шинэ гарчиг'} />
  </React.StrictMode>,
  document.getElementById('root')
);

гээд дамжуулна. Функц хэлбэрээр тодорхойлсон Car компонентод дамжуулсан атрибутыг бид параметрээр аваад дараа нь түүнийг ердийн обьект байдлаар ашиглаж байсан. App компонентод ч параметрийг үүний адилаар ашиглана. App компонентод дамжуулсан title атрибутыг h1 гарчигаар

  ...
  render() {
    const divStyle = {
      textAlign: 'center'
    }
    ...
    return (
      <div style={divStyle}>
        <h1>{this.props.title}</h1>

        <button className='AppButton' onClick={this.toogleCarsHandler}>Toogle car</button>

        ...
    )
  }

гэж харуулна. App компонентод дамжуулсан параметрт props обьектоор дамжин хандана. Component классаас удамшсан класс хэлбэрээр үүсгэгдсэн компонентод props нэртэй обьект тодорхойлогдсон байдаг учраас түүнийг App.js кодод тодорхойлохгүйгээр компонентийн контекст this -ээр дамжин хандана. Одоо хуудсаа харвал

App компонент түүнд дамжуулсан title атрибутын утгыг h1 гарчигаар үзүүлнэ. Эндээс Component классаас удамшсан класс хэлбэрээр үүсгэгдсэн компонентод дамжуулсан параметрт хандахдаа компонентийн контекст this -ээр дамжин түүний props обьектод хандаад цааш хэрэгтэй атрибутад хандана гэдгийг ойлгон аваарай.

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

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

Javascript дээр бичигдсэн RxJs сан нь програмчлалыг рейктив /reactive/ аргачлалаар боловсруулахад зориулагдсан. RxJs санг ашиглан массив, мөрүүд, тоонууд, промис /promise/, үйл явцууд /event/ гэх мэтийн өгөгдлийн төрлүүдээс гадна дурын синхрон зүйлүүдтэй амархан харьцан ажиллах боломжтой. Стримүүдийг нэгтгэх I хичээлд RxJs санг ашиглан өөр стримүүдийг нэг стримд нэгтгэх аргуудтай танилцаж ба энэ хичээлээр аргуудыг үргэлжлүүлэн авч үзнэ.

concatMap арга

Арга mergeMap аргатай тун адилхан. Аргыг ажиллагааг

Rx.Observable.range(1, 5)
    .concatMap((x, i) => {
        return Rx.Observable.interval(100)
            .take(x)
            .map(c => i)
    })
    .subscribe(createSubscribe('concatMap'));

кодоос харцгаая.

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

Vue төсөл бүхэлдээ компонентуудаас бүрдэн ажилладаг тул компонент ухагдхууныг сайн ойлгох нь нэн чухал. Компонентийг глобал болон локалаар бүртгүүлж сурсан тул Vue CLI хэрэгслээр үүсгэсэн төсөлдөө шилжин vue өргөтгөл бүхий компонентуудийн файлтай ажиллаж сурцгаая. Ингэснээр компонент бүр өөрийн тусдаа файлд байршин түүний төлвийг хөнгөн хянах боломжийг бүрдүүлснээр төслийн кодыг эвтэйхэнээр задлан жижиглэх юм.  
Vue CLI хэрэгслийн сүүлийн хувилбар төслийг үүсгэхдээ

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

Формд төрөл бүрийн элементүүдийг оруулахыг өмнөх хичээлүүдэд үзсэн. Формтой ажиллах ажиллагааны бас нэгэн чухал хэсэг бол түүний validation буюу шалгалтын хэсэг байдаг. Vuejs фреймворк бүгдийг хэрэгцээтэй үед нь хэрэглэх гэсэн зарчмыг баримталдаг. Өөрөөр хэлбэл фреймворкийн үндсэн пакет хамгийн хэрэгтэй суурь зүйлүүдийг агуулаад бусад шаардлагатай хэсгийг нэмэлтээр суулган ашиглах гэсэн үг юм. Формын шалгалт хийх ажиллагаа Vuejs фреймворкийн үндсэн пакетад байдаггүй бөгөөд формд шалгалт хийх хэрэгтэй бол шаардлагатай пакетыг суулгах шаардлага гарна. Энэхүү зарчим нь програмын хэмжээ, ажиллагааны хурдад сайн нөлөө үзүүлдэг сайн аргачлал юм. Хичээлээр формын шалгалтын бэлтгэл болгоод цэвэр төслийг үүсгэе.

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

Хичээлээр 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 файлыг доорх агуулгатайгаар

үүсгэн өгье.

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

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

 

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

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

 

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

тэгшитгэлийн нэг язгуур нь эерэг, нөгөө язгуур нь сөрөг байх параметрийн бүх утгыг ол.
Тэнцэтгэл бишийн нэг шийд нь M -ээс бага нөгөө шийд нь M -ээс их байх гарцаагүй ба хүрэлцээтэй нөхцөлийг ашиглавал болох бөгөөд энэ тэнцэтгэл бишийг бодвол үед манай тэнцэтгэл бишийн шийдийн нэг нь эерэг нөгөө нь сөрөг байна.

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

 

функц [1;9] завсарын аль хэсэгт буурах вэ?

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

 

функцийн хамгийн бага утгыг ол.

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