React izteiksmes kā rekvizīti / props

Jūs noteikti jau esat mazliet iemācījies izmantot izteicienus kā rekvizītus. Tie, cita starpā, var būt trīskārši operatori, funkciju izsaukumi vai dažas aritmētiskas darbības.

Tomēr jūs varat nodot gandrīz jebkura veida izteiksmi kā rekvizītu.

Piemēram:

const bool = false;


function Piemērs(props) {
     return (
         <h2>ToggleBoolean parametra vērtība ir: {props.toggleBoolean.toString()}</h2>
     );
};


export default function App() {
     return (
         <div className="App">
             <Piemērs toggleBoolean={!bool} />
         </div>
     );
};

!BOOL

Iepriekš minētajā piemērā jūs izmantojat !bool, tas ir, operatoru NOT, kas tiek novērtēts kā patiess, jo !false ir patiess.

Turklāt, lai lapā tiktu renderēts toggleBoolean prop, jūs pārveidojat tā Būlean vērtību par virkni, izmantojot JavaScript iebūvēto metodi toString.

Šeit ir iepriekš minētā koda paplašinājums, kas parāda vairāk veidu, kā strādāt ar izteiksmēm kā rekvizītu programmā React.

Šeit notiek tas, ka vairāki rekvizīti tiek nodoti Piemēra komponentam, un katra no šīm rekvizītu vērtībām tiek parādīta ekrānā.

const bool = false;
const str1 = "just";


function Piemērs(props) {
     return (
         <div>
             <h2>
                 ToggleBoolean prop vērtība ir:{props.toggleBoolean.toString()}
             </h2>
             <p>Matemātikas elementa vērtība ir: <em>{props.math}</em></p>
             <p>Str prop vērtība ir: <em>{props.str}</em></p>
         </div>
     );
};


export default function App() {
     return (
         <div className="App">
             <Piemērs
                 toggleBoolean={!bool}
                 matemātika={(10+20)/3}
                 str={str1 + 'cita' + 'virkne'}
             />
         </div>
     );
};

Šajā Piemēra komponenta uzlabojumā tam tiek nodoti trīs rekvizīti: toggleBoolean, math un str. ToggleBoolean ir nemainīgs, un ir pievienoti matemātikas parametri un str prop.

Matemātikas palīglīdzeklis ir paredzēts, lai parādītu, ka JSX varat pievienot aritmētiskos operatorus un skaitļus, un tas tiks novērtēts tāpat kā vienkāršā JavaScript.

Str prop ir paredzēts, lai parādītu, ka jūs varat savienot virknes, kā arī virknes un mainīgos — tas tiek parādīts, pievienojot str1 mainīgajam virknes literāļus “other” un “string”.

Rezumējot, tāpat kā jūs varat izmantot izteiksmes funkciju komponentos, varat tās izmantot arī kā prop vērtības JSX elementos, renderējot šos funkcijas komponentus.

Loading

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