Outlet компонент

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

import React from "react";
import { Link } from "react-router-dom";
import "./Layout.scss";

const Layout = () => {
  return (
    <>
      <header>
        <nav className="nav">
          <ul>
            <li>
              <Link to="/">Нүүр</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/cars">Cars</Link>
            </li>
          </ul>
        </nav>
      </header>
      <main>
        <h2>Агуулга</h2>
      </main>
      <footer>2023 Он</footer>
    </>
  );
};

export default Layout;

блокуудад салгаад хуудасны ажиллагааг шалгавал

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

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

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

Холбоотой материалууд
Компонент үүсгэх

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

Өмнөх хичээлүүдэд бид create-react-app хэрэгслээр үүсгэсэн төслийн суурь код дээр жишээнүүдийг судласан. Одоо react төсөлд өөр компонентууд үүсгэн тэдгээрийг өөр хооронд нь холбон ашиглахыг сурцгаая. react -ийн компонентийг голдуу тусд нь хавтас үүсгэн байршуулдаг тул бид төслийн src хавтаст Car нэртэй хавтасыг үүсгээд түүн дотор Car.js файлыг үүсгээрэй.

react -д компонентийг үүсгэх хоёр үндсэн арга байдаг талаар JSX хичээлд дурдсан.

Динамик атрибутууд

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

VueJs -ээр хуудас дээрээс өөр сайт руу шилжилт хийх техникийг авч үзье. Хуудас дээрээс e-surgalt.com сайт руу хандах холбоосыг байршуулаад түүгээр дамжин сайтад хандая гэвэл data талбарын обьектод url талбарыг зарлаад түүнд шилжих сайтын хаягаа өгөөд хуудасны кодод холбоосоор шилжих хаягаа {{ url }} гэж заасан

    <body>
        <div id="app">
            <h2>
                <a href="{{ url }}">E-surgalt</a>
            </h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    url: 'https:'
                }
            })
        </script>        
    </body>

дээрх агуулга бүхий кодыг бичэхэд болох мэт.

Хариултын хувилбарууд

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

React сан компонентод суурилан ажилладаг тул асуултын хариултын хувилбаруудыг ActiveQuiz компонентоос салган тусд нь компонент болгоё. Үүний тулд төслийн ActiveQuiz компонентийг хадгалж буй хавтаст AnswersList шинэ хавтсыг үүсгээд түүнд AnswersList.js, AnswersList.module.css файлуудыг үүсгэн өгье.

Орчны тохиргоо

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

Хичээлээр ES6 -гийн кодыг ES5 кодоор компиляц хийх талаар авч үзье. Юуны түрүүнд үүнийг ямар учраас хийх хэрэгтэй вэ? гэдгийг тайлбарлая. ES бол EcmaScript -ийн хураангуйлсан бичлэг бөгөөд 6 нь Javascript -ийн хувилбарын дугаар. ES6 гараад удаагүй байгаа ч түүнийг олон хөтөчүүд дэмжин ажилладаг болоод байгаа. Жишээ нь Chrome хөтөч ES6 дээр бичигдсэн кодыг шууд ажиллуулна. Гэвч олон хэрэглэгчид ES6 -г шууд дэмждэггүй хуучин хөтөчүүдийг жишээ нь Internet Explorer, Firefox -ийн хуучин хувилбарыг хэрэглэсээр байгаа. Харин эдгээр хуучин хөтөчүүд ES5 -ийг бүрэн дэмжин ажилладаг тул програмыг бүх хэрэглэгчид ямар нэгэн асуудалгүйгээр ашиглах боломжийг бүрдүүлэх зорилгоор ES6 -гийн кодыг ES5 кодоор компиляц хийх хэрэгцээ бий.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

функцийн интервал дахь хамгийн бага утгыг ол.

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

 
Бодлого 10.049

Зөв дөрвөн өнцөгт пирамидын өндөр 4. Хажуу ирмэг суурийн хавтгайд 30 градусын өнцгөөр налсан бол пирамидын хажуу ирмэгийг ол.

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

 
Бодлого 4.062

бол M·N=?

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

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