Reagieren - Legen Sie Standard-Requisiten für funktionale Komponenten fest

In React verwenden wir props, um Werte von übergeordneten Komponenten an ihre untergeordneten Komponenten weiterzugeben. Wenn wir funktionale Komponenten erstellen, müssen wir berücksichtigen, dass einige der als Requisiten weitergegebenen Werte möglicherweise nicht vorhanden sind.

Hier brauchen wir die Standard-Requisiten. Das heutige Tutorial verwendet zwei Ansätze, um zu demonstrieren, wie wir Standard-Requisiten für funktionale Komponenten in React festlegen können.

Reagieren - Legen Sie Standard-Requisiten für funktionale Komponenten fest

Es gibt zwei Ansätze zum Festlegen von Standard-Requisiten für funktionale Komponenten in React. Hier werden wir beide Methoden diskutieren und lernen und hervorheben, welche besser zu verwenden ist.

Legen Sie Standardparameter in der Funktionsdefinition fest

Der erste Ansatz besteht darin, die Standardparameterfunktion in JavaScript zu verwenden. Sehen wir uns ein Beispiel unten an:

export default function App() {
  return (
    <div className="App">
      <Child firstName="George" lastName="Smith" />
    </div>
  );
}
function Child({ firstName = "Irakli", lastName = "Tchigladze" }) {
  return (
    <div className="App">
      <h1>{firstName + " " + lastName}</h1>
    </div>
  );
}

Wenn die übergeordnete Komponente die props firstName und lastName weitergibt, wie im obigen Beispiel, ersetzen die in der übergeordneten Komponente angegebenen Werte die Standardwerte.

Wenn diese props nicht weitergegeben werden, verwendet die untergeordnete Komponente Werte, die als Standardparameter festgelegt wurden.

Versuchen Sie nun, die auf der Komponente <Child /> gesetzten props zu löschen. Die untergeordnete Komponente benötigt diese Werte, um einen Text auf der Seite darzustellen.

Wenn wir die Standardparameter nicht gesetzt haben, führt das Nichtübergeben notwendiger Werte zu einem Fehler wie firstName is not defined.

Das Festlegen von Standardparametern hilft uns, diesen Fehler zu vermeiden. Stattdessen ersetzt die Komponente <Child> diese Variablen durch Standardparameter.

Verwenden Sie den Parameter defaultProps, um Standardparameter festzulegen

Eine andere Möglichkeit, Standardwerte festzulegen, ist über die Eigenschaft defaultProps. Lassen Sie uns das vorherige Beispiel mit dieser Methode umschreiben:

const Child = ({ firstName = "Irakli", lastName = "Tchigladze" }) => {
  return (
    <div className="App">
      <h1>{firstName + " " + lastName}</h1>
    </div>
  );
};

Child.defaultProps = { firstName: "Irakli", lastName: "Tchigladze" };

In diesem Fall setzen wir die Eigenschaft defaultProps gleich einem anderen Objekt. Die untergeordnete Komponente verwendet standardmäßig dieses Objekt, wenn keine Requisiten von der übergeordneten Komponente weitergegeben werden.

Diese Syntax ist relativ einfach, erfordert jedoch einige zusätzliche Codezeilen.

Das größere Problem ist jedoch, dass laut Dan Abramov, einer der prominenten Personen hinter React, die Unterstützung der funktionalen Komponente für die Eigenschaft defaultProps veraltet sein wird.

Wenn Sie der Meinung sind, dass Sie sich um die langfristige Stabilität Ihres Projekts kümmern müssen, ist es besser, Standardparameter zu verwenden, anstatt Standardprops mit der Eigenschaft defaultProps festzulegen.