Categorii
Programare

Limita flexibilității JSX în React

Această limită constă în funcții anonime care autoapelează și execută un bloc întreg de instrucțiuni (sau mai multe incorporate în el).

<div>
  {((y) => {
    const x = 5 + 5 + y;
    return x;
  })(10)}
</div>

În interiorul funcției de mai sus, funcție care primește un parametru y cu valoarea 10 și returnează valoarea finală 5 + 5 + 10, poate fi pusă orice structură logică JavaScript. Această bucată de cod afișează textul „20” (fără ghilimele) în interiorul unui <div>.

Acest fel de funcție se numește IIFE (https://developer.mozilla.org/en-US/docs/Glossary/IIFE).

Dacă în schimb punem {5+5+z} unde z este o variabilă declarată cu var, este posibil să se afișeze doar ultima valoare a lui z în caz că al nostru cod este, de exemplu, într-un ciclu for cu contorul z . Problema nu apare când se folosește let în loc de var . Mai multe informații găsiți aici: https://developer.mozilla.org/en-US/docs/Glossary/IIFE#for_loop_with_var_before_es6 .

{(() => {
  const a = [];
  for (var i = 0; i < 5; ++i) {
    a.push(
      <button
        onClick={() => {
          alert(i); // afișează mereu 5
        }}
      >
        Butonul {i + 1}
      </button>
    );
  }
  return a;
})()}

Corectat, codul arată astfel:

{(() => {
  const a = [];
  for (let i = 0; i < 5; ++i) {
    a.push(
      <button
        onClick={() => {
          alert(i); // afișează numerele de la 0 inclusiv la 4 inclusiv
        }}
      >
        Butonul {i + 1}
      </button>
    );
  }
  return a;
})()}

În fine, astfel de expresii pot fi folosite și în interiorul valorii unui prop:

<div
  style={{
    fontSize: ((y) => {
      const x = 5 + 5 + y;
      return x;
    })(1)
  }}
>
  Micul meu div
</div>

Cutie de nisip cu cod: https://codesandbox.io/s/hungry-breeze-qlyi6?file=/src/App.tsx .

Dacă aveți întrebări sau feedback, nu ezitați să scrieți în comentarii mai jos. Toate gândurile bune!

0 0 voturi
Article Rating
Abonare
Anunță la
guest
0 Comments
Feedback-uri inline
Vezi toate comentariile