Бид Дадлага. /Төсөл үүсгэх/ хичээлээр өмнөх хичээлүүдэд үзсэн онолын мэдлэгээ батагах үүднээс төслийг үүсгэсэн. Одоо дадлагын төслийн зохион байгуулалтыг хариуцах суурь компонентийг үүсгэе. Энэ компонент сайтад үзүүлэх хуудасны бүх элементүүдийг багцлан агуулах юм. Энэхүү суурь компонент бусад компонентуудийг багцлах тул дээд түвшингийн компонент гэж үзэж болно.

JavaScript бол обьект хандлагатай хэл. Нөхцөл ба циклийн үйлдлүүд гээд хэлний үндсэн бүтцээс бусад бараг бүх боломжууд ямар нэгэн байдлаар обьектыг ашиглан хийгдэнэ. Зарим нэгэн тодорхой шийдлүүдийг жишээ нь HTML, XML гэх мэтийн хуудасны боловсруулалтыг хуудасны обьектын моделыг шууд ашиглах замаар хийдэг бол зарим зорилгод жишээ нь ердийн мөрийн өгөгдлүүдийг String обьектыг ашиглах гэх мэтээр. Обьект энэ бол өгөгдлийн хүнд төрөл. Гэсэн хэдий ч энэ ойлголтыг сайн ойлгохгүйгээр Javascript -ын хүч чадлыг гаргах боломжгүй. Энэ хичээлээр бид JavaScript -ын өгөгдлийн төрлийн нэг болох хэрэглэгчийн обьектын талаар авч үзнэ.

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

const [results, setResults] = useState({})

сорилгын үр дүнгийн results төлвийг нэмэн өгье. results обьект үр дүнг {[асуултын_id]: хариултын_төлөв} хэлбэрээр агуулна. Өөрөөр хэлбэл хариултын төлөв талбарт хариулт зөв бол right буруу бол wrong утгыг агуулах юм.

Төслийн App компонентийн кодыг харвал

class App extends Component {

  state = {
    cars: [
      { name: 'Toyata Prius', year: '2018' },
      { name: 'Toyata Camry', year: '2019' },
      { name: 'Ford', year: '2015' }
    ],
    pageTitle: 'App компонент'
  }

  changeTitleHandler = (newTitle) => {
    this.setState({
      pageTitle: newTitle
    })
  }

  ChangeHandle = (event) => {
    this.setState({
      pageTitle: event.target.value
    })
  }

  render() {
    const divStyle = {
      textAlign: 'center'
    }

    const cars = this.state.cars

    return (
      <div style={divStyle}>
        <h1>
          {this.state.pageTitle}
        </h1>

        <input type="text" onChange={this.ChangeHandle} />

        <button onClick={this.changeTitleHandler.bind(this, 'App өөрчлөлт')}>Гарчиг өөрчлөх</button>
        <Car
          name={cars[0].name}
          year={cars[0].year}
          onChangeTitle={this.changeTitleHandler.bind(this, cars[0].name)}
        />
        <Car
          name={cars[1].name}
          year={cars[1].year}
          onChangeTitle={() => this.changeTitleHandler(cars[1].name)}
        />
        <Car
          name={cars[2].name}
          year={cars[2].year}
          onChangeTitle={() => this.changeTitleHandler(cars[2].name)}
        />
      </div>
    )
  }
}

болсон байгаа.