Компонент гэж юу болох

React компонентод тулгуурладаг сан тул компонент гэж юу болохыг ойлгоцгооё. Үүний тулд машиний мэдээллийг үзүүлэх

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Lesson 01_02</title>
  <style>
    .car {
      display: inline-block;
      border: 2px solid #ccc;
      box-shadow: 2px 2px 1px #eee;
      padding: 10px;
      margin-right: 10px;
    }
  </style>
</head>

<body>
  <div class="car">
    <h3>Toyata Camry</h3>
    <p>Year: <strong>2019</strong></p>
  </div>
</body>
</html>

код бүхий html файлыг үүсгээд хөтөч дээр нээвэл

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

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

request_quoteТусгай эрх авах

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

Холбоотой материалууд
Хүүхэд компонент хоорондын холбоо

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

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

<template>
  <div>
    <h1>Тоолуур: {{ counter }}</h1>
  </div>  
</template>

<script>
export default {
  props: ['counter']    
}
</script>

кодтой Counter.vue компонентийг үүсгэе. Counter компонент өөртөө ирэх параметрийн утгыг h1 тегд тоолуурын утгаар л үзүүлнэ.

State -ийг зөв өөрчлөх

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

Компонентийн төлвийн өөрчлөлтийг хийх setState арга ансинхрон ажиллагаатай тул төлвийн өөрчлөлтийг зөв хийж сурах хэрэгтэй. Үүнийг Фрагмент хичээлд үүсгэсэн

import React, { Component } from 'react'

export default class Counter extends Component {
  state = {
    counter: 0
  }
  addCounter = () => {
    this.setState({
      counter: this.state.counter + 1
    })
  }
  render() {
    return (
      <div>
        <h2>Тоолуур {this.state.counter}</h2>
        <button onClick={this.addCounter}>+</button>
        <button onClick={() => this.setState({ counter: this.state.counter - 1 })}>-</button>
      </div>
    )
  }
}

Counter компонентийн жишээн дээр авч үзье.

Input талбарын боловсруулалт

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

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

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

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

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

Динамик жагсаалт

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

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

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

Үйл явдал…

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

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

 
Холбоосын параметрүүд

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

 
Хадгалагч (Memento)

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

 
Кодийн сайжруулалт

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

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

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

олон гишүүнтийн язгуурууд x1, x2, x3 (x1<x2<x3) бол
1.
2. x1, x2, x3 арифметик прогрес үүсгэх бол
3. Уул прогрессын ялгавар
4.

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

 
Бодлого 11.077

sin90 -ийг олно уу.

Жич: Хатуу самар даа. Сурагчид барна гэхэд хүнд болов уу. ЕБС-ийн хүрээний аргаар л бодолтыг хийж байгаа тул бодолтыг харвал гайгүй ч юм шиг санагдаж магадгүй гоё бодлого.

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

 
Бодлого 3.132

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

Жич: Бодох арга орж ирж байна уу. Найз нөхөд, багштайгаа хамжаад үзээрэй. Иймэрхүү бодлогууд сэтгэлгээг хөгжүүлэх, арга техникт суралцахад тустай. 

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

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