ReactJS: Budowanie komponentów dynamicznych za pomocą renderowania warunkowego

Co to jest renderowanie warunkowe w React?

React to deklaratywna biblioteka JavaScript typu open source, służąca do tworzenia wydajnych komponentów interfejsu użytkownika. Renderowanie warunkowe to funkcja w React, która umożliwia programistom renderowanie różnych komponentów lub treści w komponentach w oparciu o określone warunki, stany, dane wejściowe użytkownika lub dostępność danych. Może zminimalizować nadmiarowy kod, udostępniając więcej dynamicznych komponentów wielokrotnego użytku.

Aby komponenty wyświetlały użytkownikom określone wyniki w zależności od różnych warunków, możemy użyć logicznej składni JavaScript, takiej jak if/else instrukcje, instrukcje switch case, operatory potrójne i operatory „&&”, aby zmienić to, co zwróci komponent renderujący.

W poniższych przykładach komponent UserList jest elementem nadrzędnym komponentu Użytkownik. W naszym komponencie nadrzędnym renderujemy komponenty potomne, które otrzymają właściwości name (string) i isVerified (boolean).

jeśli/inaczej

function User({ name, isVerified }) {
  if(isVerified) {
    return <li className="user">{name}⭐️</li>;
  }
  return <li className="user">{name}</li>;
}

export default function UserList() {
  return (
    <div>
      <h1>List of Users:</h1>
      <ul>
        <User
          name={"John"}
          isVerified={false}
        />
        <User
          name={"Mary"}
          isVerified={true}
        />
        <User
          name={"Ryan"}
          isVerified={false}
        />
      </ul>
    </div>
  );
}

Jeśli właściwość isVerified dla użytkownika ma wartość true, wówczas komponent User zwróci „⭐️” obok nazwy użytkownika.

przełącznik

function User({ name, isVerified }) {
  switch(isVerified) {
    case true:
      return <li className="user">{name}⭐️</li>;
    case false:
      return <li className="user">{name}</li>;
  }
}

Tę samą logikę można wyrazić w instrukcji switch case pokazanej powyżej.

trójskładnikowy

function User({ name, isVerified }) {
  return (
    <li className="user">
      {isVerified ? name + "⭐️" : name} 
    </li>
  );
}

Operator trójskładnikowy jest niezwykle przydatny w zmniejszaniu nadmiarowości i tworzeniu czystszego kodu pokazanego w powyższym kodzie.

// ternary operator syntax
condition ? truthyExpression : falsyExpression

&&

function User({ name, isVerified }) {
  return (
    <li className="user">
      {name} {isVerified && "⭐️"} 
    </li>
  );
}

Wreszcie użycie operatora && to kolejna metoda pisania mniejszej ilości kodu w celu osiągnięcia tego samego logicznego wyniku. Jeśli parametr isVerified ma wartość true, zostanie wyświetlona gwiazdka. W przeciwnym razie wyświetli się tylko nazwa.

Renderowanie warunkowe jest istotną funkcją ReactJS, ponieważ umożliwia programistom tworzenie interaktywnych i dynamicznych komponentów interfejsu użytkownika. Bez renderowania warunkowego znacznie trudniej byłoby stworzyć komponenty wielokrotnego użytku, które można dostosować do różnych scenariuszy i warunków.

Oto kilka przydatnych źródeł, z których można dowiedzieć się więcej na temat renderowania warunkowego: