Ändern Sie die Schriftgröße in React dynamisch

1. Ändern Sie die Schriftgröße in React dynamisch
2. Generieren Sie eine dynamische Schriftgröße in React mit dem ternären Operator

Flexibilität und Anpassungsmöglichkeiten sind eine der besten Eigenschaften von React. Entwickler können Komponenten dynamisch ausblenden und anzeigen und sogar bestimmte Stile oder Klassen anwenden (oder nicht anwenden).

Dieser Artikel zeigt, wie man Inline-Stile generiert, um die Schriftgröße in React zu ändern.

Ändern Sie die Schriftgröße in React dynamisch

Es gibt viele Möglichkeiten, dynamische Inline-Stilwerte anzuwenden. Sie können eine Variable haben, die einen numerischen Wert enthält, und die Schriftgröße auf diese Zahl festlegen.

Diese Variable kann als Requisiten an Ihre Komponente weitergegeben werden, oder Sie können eine Zustandsvariable erstellen, um Benutzereingaben zu speichern.

Schauen wir uns ein Beispiel an:

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [size, setSize] = useState(12);
  return (
    <div className="App">
      <label for="fontSize">Specify the font size</label>
      <br></br>
      <br></br>
      <input
        type="text"
        name="fontSize"
        onChange={(e) => setSize(e.target.value)}
      ></input>
      <p style={{ fontSize: `${size}px` }}>Text with dynamic font size</p>
    </div>
  );
}

Sie können die Live-Demo auf CodeSandbox sehen.

In diesem Fall haben wir den Haken useState() verwendet, um zwei Variablen zu definieren: size, die die Anzahl der Pixel für die Schriftgröße ist, und die Variable setSize, die eine Funktion enthält, die zum Aktualisieren dieses Werts verwendet wird .

Wir haben den Wert der Variablen size mit 12 initialisiert.

Unser JSX-Code enthält ein <input>-Element. Wir können einen onChange-Event-Handler einrichten, der auf Änderungen am Eingabefeld wartet, und die setSize()-Funktion verwenden, um die Zustandsvariable zu aktualisieren.

Schließlich legen wir den Inline-Stil fest, um die Schriftgröße anzugeben. Beachten Sie, dass Sie doppelte geschweifte Klammern verwenden müssen; ein Paar ist notwendig, um einen JavaScript-Ausdruck auszuwerten, und das andere, um ein Objekt zu bezeichnen.

Wir verwenden Vorlagenseiten, um den Wert der Eigenschaft fontSize anzugeben. Wenn sich die Zustandsvariable size ändert, ändert sich auch der Wert der CSS-Eigenschaft fontSize.

Generieren Sie eine dynamische Schriftgröße in React mit dem ternären Operator

Es gibt viele Möglichkeiten, die Schriftgröße in React dynamisch zu generieren. Beispielsweise können Sie die Schriftgröße abhängig davon ändern, ob ein bestimmter boolescher Wert wahr oder falsch ist.

Stellen Sie sich vor, Sie haben eine Anwendung, in der Sie eine Fehlermeldung anzeigen möchten. Vielleicht möchten Sie die Fehlermeldung größer machen.

In diesem Fall können Sie eine Variable Fehler einrichten, die wahr ist, wenn ein Fehler vorliegt, und falsch, wenn nicht. Dann können Sie einen ternären Operator verwenden, um den Wert fontSize zu generieren.

Schauen wir uns ein Beispiel an:

import "./styles.css";
export default function App() {
  const error = false
  return (
    <div className="App">
      <p style={{ fontSize: error ? "16px" : "12px" }}>Text with dynamic font size</p>
    </div>
  );
}

Im Fehlerfall hat das Absatzelement eine Größe von 16 Pixel. Wenn nicht, sind es 12.