Динамик өгөгдлийг харуулах

Өмнөх хичээлүүдэд үүсгэсэн App, Car компонентууд өөрийн статик агуулгуудыг л хуудаст харуулж байгаад бага зэргийн динамик ажиллагааг оруулах гээд үзье. Компонентийн агуулгын хэсэг jsx бичлэгийн дүрмээр бичигдсэн javascript код учраас бид түүнд динамик ажиллагааг оруулахад төвөггүй мэт. Иймээс Car компонентийн кодийг

import React from 'react'

const car = () => <div>
  <p>This is car component</p>
  <p><strong>1+1</strong></p>
</div>

export default car

гэж өөрчлөөд хуудсаа харвал

гэж харагдана. javascript -д 1+1 -г уул нь 2 гэж үзүүлэх ёстой байтал хуудаст ердийн статик текст байдлаар харуулсан. jsx -д 1+1 -г javascript код гэдгийг хэрхэн ойлгуулах вэ гэвэл түүнийг {} хаалтанд авах хэрэгтэй. Тэгвэл jsx хаалтан дахь хэсгийг javascript код гэж үзэн түүнд үйлдэл хийх болно. Өөрөөр хэлбэл кодийг

import React from 'react'

const car = () => <div>
  <p>This is car component</p>
  <p><strong>{1+1}</strong></p>
</div>

export default car

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

гэж харагдана. {} хаалтанд javascript -ийн энгийн функцийг ч

const car = () => <div>
  <p>This is car component</p>
  <p><strong>{Math.random()}</strong></p>
</div>

өгч болно. Өөрчлөлтийг хадгалаад хуудсаа харвал

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

class App extends Component {
  render() {
    const divStyle = {
      textAlign: 'center'
    }
    return (
      <div style={divStyle}>
        <h1 style={{ color: 'blue', fontSize: '20px' }}>
          Hello world!
        </h1>
        <Car />
        <Car />
      </div>
    )
  }
}

хоёр оруулан ирвэл

компонент бүр өөрийн санамсаргүй тоог тооцон гаргах болно. {} хаалтанд javascript -ийн энгийн функц, илэрхийллийг өгөн тооцоо хийлгэхийг

import React from 'react'

const car = () => <div>
  <p>This is car component</p>
  <p>Number: <strong>{Math.round(Math.random()*100)}</strong></p>
</div>

export default car

жишээгээр харуулъя. {} хаалтанд javascript -ийн энгийн функц, илэрхийллийг өгөн тооцоо хийлгэх дадлагыг өөрсдөө хийн туршин үзээрэй.

Зөвлөмж: Суралцах нь тийм амар ажил биш ч гэлээ хүн өөрийгөө дайчилж чадвал юуг сурах чадвартай. Сайтын програмчлалтай холбоотой хичээлүүдээс та тухайн хэлний анхан шатны баттай суурь мэдлэгтэй болно гэдгийг баттай хэлэх байна. Програмчлалын хэлийг дээд сургуульд л заадаг гэж буруу ойлгож болохгүй. Програмчлалын хэлийг ЕБС -ийн 7, 8 -р ангиас эхлэн судлан суралцах бүрэн боломжтой. Програмийн код бичих, програм зохиох ажилд хийсвэр сэтгэлгээ, юмыг олон талаас нь ухан ойлгох, өөрөө суралцах чадвар нэн чухал. Энэхүү чадваруудыг танд суулгах нь манай сайтын үндсэн үүрэг. Аливаа зүйлийн суурь онолыг судлахгүйгээр шууд практикт ашиглах гэж оролдох нь тун хэцүү болоод үр дүн муутай. Иймээс эхлээд суурь ухагдхуунуудыг судлан ойлгоод дараа нь түүнийгээ бодит ажилд хэрэглэж сураарай. Эзэн хичээвэл заяа дагана гэдэг тул танд ч бас боломж бүрэн байгаад итгээрэй.     

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

Холбоотой материалууд
Кодийн сайжруулалт

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

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас хооронд динамик буюу дахин ачаалахгүйгээр шилжилт хийх боломжийг бүрдүүлсэн. App компонентийн кодод бүртгүүлсэн

function App() {
  return (
    <div>
      <nav className="nav">
        <ul>
          <li>
            <Link to="/">Нүүр</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <hr />
      <Routes>
        <Route path="/" element={<Cars />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

export default App;

/ чиглүүлэгч манай нүүр хуудас буюу http://localhost:3000/ хаягийг зааж байгаа ч Cars компонентод шилжиж байгаа нь логикийн талаасаа ойлгомж муутай болсон. Иймээс кодийг / чиглүүлэгчээр нүүр хуудаст шилждэг болгоё.

ErrorBoundary

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

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 компонентийг үүсгэе.

Үйл явдал нэмэх

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

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

    <body>
        <div id="app">
            <h2>Тоолуур = {{ counter }}</h2>
            <button>Нэмэгдүүлэх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    counter: 0
                }
            })
        </script>
    </body>

кодтой хуудсаар судлая. Кодод h2 гарчигт Тоолуур = текстийн араас {{ counter }} гэж хувьсагчийг үзүүлнэ. counter -ийг Vue -гийн тохиргооны обьектын data талбарт 0 утгатайгаар зарласан.

Интерполяц

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

Хичээлээр Vue -гийн интерполяц гэж юу болох, түүний боломжийн талаар дэлгэрэнгүй авч үзнэ. Тухайлбал Энгийн Vue програм үүсгэх хичээлд үзсэн {{ name }} бүтцийн тухай бөгөөд үүнийг програмд хэрхэн ашиглах, ямар боломжуудтай, бүтцээр юу хийж болох тухай үзнэ. Энгийн Vue програм үүсгэх хичээлийн жишээтэй төстэй #app -элементэд Vue -гийн инициализацийг хийсэн app тодорхойлогчтой div -д мэндчилгээний текстийг үзүүлэх

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

кодыг авч үзье.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

тэнцэтгэл биш хэдэн бүхэл тоон шийдтэй вэ?

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

 
Бодлого 3.047

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

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

 
Бодлого 6.064

b1=3, bn=96, Sn=189 геометр прогресийн 8-р гишүүнийг ол.

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

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