{"componentChunkName":"component---src-templates-docs-js","path":"/docs/fragments.html","result":{"data":{"markdownRemark":{"html":"
\n
\n

These docs are old and won’t be updated. Go to react.dev for the new React docs.

\n

These new documentation pages teach modern React:

\n\n
\n
\n

React компонент нь олон элементийг харуулахдаа заавал багц байдлаар буцаах шаардлагатай. Харин Фрагмент нь нэмэлт DOM нүдний шаардлагагүйгээр олон элементийг нэг багц болгон харуулдаг.

\n
render() {\n  return (\n    <React.Fragment>\n      <ChildA />\n      <ChildB />\n      <ChildC />\n    </React.Fragment>\n  );\n}
\n

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

\n

Сэдэл

\n

Компонент нь олон элементийг жагсаалт болгон харуулдаг. Доорх React жишээг харъя:

\n
class Table extends React.Component {\n  render() {\n    return (\n      <table>\n        <tr>\n          <Columns />\n        </tr>\n      </table>\n    );\n  }\n}
\n

<Columns /> нь олон <td> элементийг зѳв HTML харуулахын тулд буцаана. Хэрвээ <Columns /> компонентийн render() функц div ашиглавал харагдах HTML нь буруу гарна.

\n
class Columns extends React.Component {\n  render() {\n    return (\n      <div>\n        <td>Hello</td>\n        <td>World</td>\n      </div>\n    );\n  }\n}
\n

<Table /> харагдах үр дүн:

\n
<table>\n  <tr>\n    <div>\n      <td>Hello</td>\n      <td>World</td>\n    </div>\n  </tr>\n</table>
\n

Фрагмент нь энэ асуудлыг шийднэ.

\n

Хэрэглээ

\n
class Columns extends React.Component {\n  render() {\n    return (\n      <React.Fragment>        <td>Hello</td>\n        <td>World</td>\n      </React.Fragment>    );\n  }\n}
\n

Ингэснээр зѳв <Table /> үр дүн үзүүлнэ:

\n
<table>\n  <tr>\n    <td>Hello</td>\n    <td>World</td>\n  </tr>\n</table>
\n

Богино синтакс

\n

Фрагмент ашиглахдаа шинэ богиносгосон хувилбарыг ашиглаж болно. Яг хоосон таг юм шиг харагдана:

\n
class Columns extends React.Component {\n  render() {\n    return (\n      <>        <td>Hello</td>\n        <td>World</td>\n      </>    );\n  }\n}
\n

<></> -ыг яг л бусад элементүүд ашигладаг шиг ашиглана. Гэхдээ энэ нь keys эсвэл бусад аттрибутуудыг дэмжихгүй.

\n

Key-тэй фрагмент

\n

Фрагмент нь <React.Fragment> хэлбэрээр зарлагдсан бол key агуулж болдог. Array -ыг олон фрагмент болгон харуулах гэх мэт нѳхцѳлд ашиглана — жишээ нь:

\n
function Glossary(props) {\n  return (\n    <dl>\n      {props.items.map(item => (\n        // Without the `key`, React will fire a key warning\n        <React.Fragment key={item.id}>\n          <dt>{item.term}</dt>\n          <dd>{item.description}</dd>\n        </React.Fragment>\n      ))}\n    </dl>\n  );\n}
\n

key нь Фрагментэд авч болох цорын ганц аттрибут юм. Цаашдаа бид бусад аттрибутууд болох event handler мэтийг дэмжих боломжтой болгоно.

\n

Live Demo

\n

Фрагментийг энд туршиж болно. CodePen.

","frontmatter":{"title":"Хэлтэрхий","next":null,"prev":null},"fields":{"path":"content/docs/fragments.md","slug":"docs/fragments.html"}}},"pageContext":{"slug":"docs/fragments.html"}},"staticQueryHashes":[]}