Inline стилүүд

Html хэвийн элементүүдэд хэвжүүлэлтийн стилийг шууд буюу inline /элементийн тодорхойлолтын мөрөнд/ зааж болдог. Үүнийг React компонентийн хэвийн элементүүдэд хэрхэн өгөхийг App компонентийн

class App extends Component {
  render() {
    return (
      <div>
        <h1>
          Hello world!
        </h1>
      </div>
    )
  }
}

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

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

how_to_regБүртгүүлэх

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

Холбоотой материалууд
Фрагмент

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

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

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

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

Дээд түвшингийн компонентууд

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

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

import React from "react";
import styles from "./Car.module.css";

class Car extends React.Component {
  render() {
    const inputClasses = [styles.input];

    if (this.props.name !== "") {
      inputClasses.push(styles.green);
    } else {
      inputClasses.push(styles.red);
    }

    if (this.props.name.length > 5) {
      inputClasses.push(styles.bold);
    }

    return (
      <div className={styles.Car}>
        <h3>Машиний нэр: {this.props.name}</h3>
        <p>
          Он: <strong>{this.props.year}</strong>
        </p>
        <input
          type="text"
          onChange={this.props.onChangeName}
          value={this.props.name}
          className={inputClasses.join(" ")}
        />
        <button className={styles.btn} onClick={this.props.onDelete}>
          Устгах
        </button>
      </div>
    );
  }
}

export default Car;

өөрчилье.

Үйл явдал (event)

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

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

Дадлага. /Төсөл үүсгэх/

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

Өмнөх хичээлүүдэд үзсэн онолын мэдлэг дээрээ суурилан түүнийгээ батгах дадлага болгон react дээр төслийг үүсгэе. Төслөө бид үе шаттайгаар өргөжүүлэх бөгөөд эхний ээлжинд компонент хэсэгт сурсан зүйлээ бататган авах болно. Цаашид судлах зүйлүүдийг төсөлдөө нэмэх байдлаар явах юм. Өөрөөр хэлбэл энэ төсөл манай туршилтын талбар болно.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

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

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

 
Бодлого 12.067

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

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

 
Бодлого 9.099

Зурагт өгөгдсөн дотоод байдлаараа шүргэлцсэн хоёр тойргийн TA нь ерөнхий шүргэгч, TC нь том тойргийн огтлогч, жижиг тойргийн шүргэгч болно. DC=3, CB=2 бол TA -г ол.

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

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