Preperējam Rekvizītus, jeb PROPS

Atceramies, ka līdzīgi parametriem JavaScript funkcijā, kas ļauj nodot vērtības kā argumentus, React izmanto rekvizītus “propertijus”, lai nodotu datus starp komponentiem. Bet kā tieši viņi strādā?

Šajā rakstā jūs izmantosiet transpilatoru, lai JSX kodu pārveidotu uz vienkāršu JavaScript, padarot tā mērķi saprotamāku.

Vispirms atcerieties, ka JSX kods programmā React ir tikai sintaktiskais “cukurs” — tas nozīmē, jaukāks veids, kā rakstīt grūti lasāmu kodu.

Lai pārlūkprogramma saprastu šo sintaktisko “cukuru”, jums ir jāpārveido JSX uz vienkāršu JavaScript kodu. Tiešsaistē ir pieejams resurss babeljs.io URL, kas ļauj pārbaudīt šīs transpilācijas rezultātus. Kad esat apmeklējis vietni, galvenajā navigācijas panelī noteikti atveriet saiti Izmēģinātu.

Piemēram, pieņemsim, ka jums ir komponents, kas atgriež daļu JSX:

function App() {
  return <h1>Sveiki visiem!</h1>
}
… ja izmantojāt Babel transpilatoru, lai pārveidotu šo JSX sintaktiskā “cukura” kodu līdz vienkāršam JavaScript kodam, jūs saņemtu neparastu kodu:
"use strict";
function App() {
    return /*#__PURE__*/React.createElement("h1", null, "Hello there");
}

Jums vienkārši vajadzētu koncentrēties uz React.createElement(“h1”, null, “Sveiki visiem!”); daļu. Pārējo varat ignorēt.

Tas nozīmē, ka funkcija createElement saņem trīs argumentus:

  1. Renderējamais “iesaiņojuma” elements “wrapping“.
  2. Nulles vērtība (kas ir paredzēta, lai parādītu paredzamās JavaScript objekta vērtības neesamību).
  3. Iekšējais saturs, kas nonāks wrapping elementā.

Interesanti, ka iekšējais saturs, kas nonāks wrapping elementā, var būt arī izsaukums uz CreateElementfunkciju.

Piemēram, pieņemsim, ka jums ir nedaudz sarežģītāka JSX elementu struktūra:

function App() { 
  return (
    <div>
    <h1>Sveicināti visi!</h1> 
    </div>
  )
}
… pārsūtītais atgriešanas priekšraksts vienkāršā JavaScript valodā atkal atgriež divas CreateElement funkcijas:
"use strict";
function App() {
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "Sveiki visi!"));
}
Ja formatējat šo izvadi, noņemat rindiņu ““use strict“” un noņemat __PURE__ komentārus, jūs iegūsit labāk lasāmu izvadi:
function App() {
  return React.createElement(
    "div",
    null,
    React.createElement("h1", null, "Sveiki visi!")
  );
}

Tātad tagad attālākā React.createElement izsaukuma trešais arguments ir vēl viens React.createElement izsaukums.

Tādā veidā jūs varat ievietot tik daudz elementu, cik vēlaties.

Tas nozīmē, ka ligzdotā JSX struktūra ir tikai ligzdotu React.createElement izsaukumu kopums, kas tiek nodoti citiem React.createElement izsaukumiem kā trešais arguments.

Otrais – nulles – arguments

Otro nulles argumentu šajā gadījumā var aizstāt ar tukšu objektu.

Tādā gadījumā jūsu kodā būtu ietverts figūriekavas iekavas “{}“, nevis vārds null:

"use strict";


function App() {
  return React.createElement(
    "div",
    {},
    React.createElement("h1", {}, "Sveiki visiem!")
  );
}

Šis objekts tiek saukts par rekvizītu objektu. Tas ir galvenais mehānisms datu nosūtīšanai no vecākkomponenta uz pakārtoto komponentu programmā React.

Tas, kā tas darbojas, ir aprakstīts React dokumentos, izmantojot šādu kodu:

React.createElement(
  type,
  [props],
  [...children]
)

Trešais arguments (…bērni)

Šis ir iekšējais saturs, kas nonāks iesaiņojuma elementā. Tas ļauj ligzdot elementus citos elementos, atdarinot veidu, kā darbojas HTML.

Šajā rakstā jūs uzzinājāt, kā izmantot transpilatoru, lai JSX kodu sadalītu uz vienkāršu JavaScript, padarot tā mērķi saprotamāku.

Loading

Noderīgs raksts? Dalies ar citiem:
Dalīties: