Програмийн хэрэглэгч талын интерфейсийг css -ээр хэвжүүлэн ашиглахад эвтэйхэн, ойлгомжтой болгодог. Иймээс энэ хичээлээс react компонентийн элементүүдийг хэрхэн хэвжүүлэх талаар авч үзье. Манай төслийн интерфейс
зурагт үзүүлсэн хэлбэртэй болоод байгаа.
Материалыг тусгай эрхтэй хэрэглэгч үзнэ.
request_quoteТусгай эрх авахМэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.
Нээгдсэн тоо: 599 Төлбөртэй
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 файлыг үүсгээд хөтөч дээр нээвэл
гэж харагдана.
Нээгдсэн тоо: 176 Бүртгүүлэх
Хичээлээр react компонентийн элементүүдийн хэвжүүлэлтэд хэрэг болох нэгэн аргачлалыг авч үзье. Тухайлбал элементийг inline -аар хэвжүүлэлтийн үед ашиглах техник юм. Иймээс Car компонентийн хэвжүүлэлтийн Car.css файлаас
.Car {
margin-bottom: 10px;
display: block;
padding: 10px;
border-radius: 5px;
}border, box-shadow хэвүүдийг хасан тэдгээрийг Car компонентод inline -аар хэвжүүлэлтээр
const style = {
border: '1px solid #ccc',
boxShadow: '0 4px 5px 0 rgba(0, 0, 0, .14)'
}
return (
<div className="Car" style={style}>
<h3>Машиний нэр: {props.name}</h3>
<p>Он: <strong>{props.year}</strong></p>
<input
type="text"
onChange={props.onChangeName}
value={props.name}
className={inputClasses.join(' ')}
/>
<button onClick={props.onDelete}>Устгах</button>
</div>
)style хувьсагчид тодорхойлоод Car компонентийг багцалж буй div -ийн style атрибутад дамжуулах болгон өөрчилье.
Нээгдсэн тоо: 131 Төлбөртэй
react 16 гаас дээш хувилбарт бий болсон кодод үүссэн алдаануудыг илүү эвтэйхэн боловсруулахад зориулагдсан ErrorBoundary амьдралын шинэ циклийн талаар судлая. ErrorBoundary аргыг туршихын тулд төслийн src хавтас ErrorBoundary хавтаст үүсгээд
import React from 'react'
export default class ErrorBoundary extends React.Component {
state = {
hasError: false
}
componentDidCatch(error, info) {
this.setState({ hasError: true })
}
render() {
if (this.state.hasError) {
return <h2 style={{ color: 'red' }}>Алдаа гарлаа</h2>
}
return this.props.children
}
}код бүхий шинэ ErrorBoundary компонентийг үүсгэе.
Нээгдсэн тоо: 594 Төлбөртэй
RxJs сангийн хүрээнд буфер гэж юу болох талаар энэ хичээлээр авч үзье. Буфер гэдгийг утгуудыг түр зуур хадгалах сав буюу орон зайг гэж ойлгоорой.
buffer, bufferTime арга
Практик жишээгээр ухагдхууныг ойлгох нь амархан байдаг учраас шууд
Rx.Observable.interval(500)
.buffer(Rx.Observable.interval(2000))
.take(3)
.subscribe(createSubscribe('buffer'));кодыг авч үзье. Хөтөч дээр хуудсаа нээвэл консолд
үр дүнг үзүүлнэ. Код юу хийж байгааг авч үзье.
тэгшитгэлийг бод.
хязгаарыг бодоорой.