Компонент болон Пропс

Компонент нь таньд дэлгэцийн загварыг бие даасан дахин ашиглаж боломжтой хэсгүүд болгодог болгож тусад нь бодож хийхэд амар болгодог. Энэ хуудас нь танд компонентын агуулгыг товч танилцуулна. Та API reference-г компонентын дэлгэрэнгүйг харж болно.

Үндсэндээ компонентууд бол Жаваскриптийн функцууд юм. Тэд оролт(“props” гэж дууддаг) хүлээж аван дэлгэц дээр харагдах React элементүүд буцаадаг.

Функц болон Класс компонентууд

Компонент тодорхойлох энгийн арга бол Жаваскрипт функц бичих юм:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Энэ функц нь нэг “props” объект аргумент өгөгдөл хүлээн авч React элемент буцааж байгаа учир зөв React компонент юм. Бид үүнийг “функц компонентууд” гэж дууддаг учир нь эдгээр нь зүгээр л Жаваскрипт функцууд юм.

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

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Дээрх хоёр компонент React-н хувьд яг ижил юм.

Функц болон Класс нь зарим нэмэлт боломжууд агуулж болох ба бид үүнийг дараагийн бүлгүүдэд судална.

Компонентыг дүрслэх нь

Өмнө бид зөвхөн DOM тагийг төлөөлөх React элементийг харсан:

const element = <div />;

Мөн түүнчлэн элемтентүүд хэрэглэгчийн тодорхойлсон компонентыг төлөөлж болно:

const element = <Welcome name="Sara" />;

Хэрвээ хэрэглэгчийн бичсэн компонент бол, React, JSX атрибут болон дотор нь гарах компонентыг энэ компонентруу нэг бүхэл объект болгон дамжуулдаг. Үүнийг “props” гэж нэрлэдэг.

Жишээлбэл, энэ код нь “Hello, Sara”-г хуудас дээр дүрсэлнэ:

function Welcome(props) {  return <h1>Hello, {props.name}</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;root.render(element);

Try it on CodePen

Энэ жишээнд юу болж байгаа тоймлоё:

1. Бид root.render() функцийг <Welcome name="Sara" /> элементээр дуудсан.
2. React Welcome компонентыг {name: 'Sara'} шинж чанартайгаар(props) дуудсан.
3. Бид Welcome компонент <h1>Hello, Sara</h1> элементийг үр дүн болгон буцаасан.
4. React DOM маш үр дүнтэйгээр <h1>Hello, Sara</h1>-д харгалзах DOM-г шинэчилсэн.

Анхаар: Компонентын нэрийг үргэлж том үсгээр эхэлж бай.

React жижиг үсгээр эхэлсэн компонентыг DOM таг гэж ойлгодог. Жишээлбэл, <div /> нь HTML div тагийг төлөөлөх, <Welcome /> нь компонентыг төлөөлөх ба Welcome компонентыг үйлчлэлийн хүрээнд байхийг шаарддаг.

Энэ нийтлэг дүрмийн цаана байгаа шалтгааныг дэлгэрэнгүй судлах бол JSX In Depth хуудсыг уншина уу.

Компонентыг нэгтгэх(compose) нь

Компонентууд нь өөр компонентын гаралтыг заасан байж болно. Энэ нь бидэнд компонент хийсвэрлэл ашиглах боломжийг ямар ч дэлгэрэнгүй түвшинд олгож байна. Товч, форм, диалог, screen: эдгээр бүгд нь React дээр компонент болдог.

Жишээлбэл, та App компонент дотор Welcome-г олон удаа дүрсэлж болно:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />      <Welcome name="Cahal" />      <Welcome name="Edite" />    </div>
  );
}

Try it on CodePen

Ерөнхийдөө шинэ React програмууд App компонент хамгийн дээд талдаа байлгадаг. Гэхдээ та байгаа програм дээр React залгах(integrate) гэж байгаа бол Button гэх мэтчилэн доод талын жижиг хэсгээс дээшээ гэхчлэн явах нь зүйтэй байж болно.

Компонент гаргаж авах

Компонентыг илүү жижиг компонентууд болгон салгахаас битгий ай.

Жишээлбэл дараах Comment компонент байя:

function Comment(props