Товч компонент

Сорилгын үр дүнгийн QuizResult компонентод сорилгыг дахин эхлүүлэх товч байгаа. react -ийг зохиогчид  програмийг компонент дээр суурилан хийх аргачлалыг уриалдаг учраас сорилгыг дахин эхлүүлэх товчийг тусд нь компонент байдлаар боловсруулъя. Үүний тулд төслийн components хавтаст UI нэртэй хавтасыг үүсгээд түүнд Button хавтасыг үүсгэе. UI гэдэг нь /user interface/ буюу хэрэглэгч талын дэлгэцийн төрөл бүрийн элементүүдийг үзүүлэх компонентуудыг агуулах юм. Button хавтас бол дэлгэц дээр үзүүлэх товчны компонентийн хавтас бөгөөд түүнд Button.js, Button.module.css үүсгэн өгөөрэй.

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

how_to_regБүртгүүлэх

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

Холбоотой материалууд
Дэвсгэр компонент

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

Програмийн цэсийн хэрэгжүүлэлтийн компонентийг хийсний дараа хуудсаа нээгээд fa-bars икон дээр дарахад

r_06_13_01

дээрх байдлаар харагдаж байгаа. Харин цэсийг эргэн харагдахгүй болгох ажиллагааг fa-times буюу x дүрс хариуцаж байгаа. Цэсийг хаах ажиллагаа fa-times буюу x дүрс дээр дарах үйл явцын боловсруулагчаас гадна цэсний гадна талд дарахад хийгддэг байвал ашиглалтын талаасаа илүү эвтэйхэн гэдэг нь ойлгомжтой.

Үйл явцаас урсгал /stream/ үүсгэх

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

RxJs санг ашиглах хичээлд бид стримийг өөрсдөө үүсгэсэн бол энэ хичээлд Javascript -ийн бэлэн обьектоос буюу үйл явцаас стримийг /урсгал/ хэрхэн үүсгэх талаар үзье. Үүний тулд index.html файлд товчийг

...
<body>
    <button>Дарах</button>
<script src="node_modules/rxjs/bundles/rxjs.umd.min.js"></script>
<script src="index.js"></script>
</body>
...

үүсгэн өгөөд товч дээр дарах үйл явцаас стрим үүсгэхийн тулд index.js файлд

var button = document.querySelector('button');
var btn$ = Rx.Observable.fromEvent(button, 'click');

кодыг оруулан өгье.

Параметрийн шалгалт

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

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

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

аваад үзье.

Элементүүдийн харагдацыг удирдах

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

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

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Vue JS</title>
    </head>
    <body>
        <div id="app">
            <h2>isVisible = True</h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    isVisible: true
                }
            })
        </script>        
    </body>
</html>

Дээрх энгийн код хуудаст h2 гарчигаар isVisible = True текстийг л үзүүлнэ. Vue -гийн тохиргооны обьектын data талбарт зарлагдсан isVisible талбарыг ашиглааагүй байгаа.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

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

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

 
Бодлого 13.054

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

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

 
Бодлого 13.092

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

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

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