React でフォント サイズを動的に変更する

1. React でフォント サイズを動的に変更する
2. 三項演算子を使用して React で動的フォント サイズを生成する

カスタマイズの柔軟性と可能性は、React の最高の機能の 1つです。 開発者は、コンポーネントを動的に非表示および表示し、特定のスタイルまたはクラスを適用する (または適用しない) こともできます。

この記事では、インライン スタイルを生成して React でフォント サイズを変更する方法について説明します。

React でフォント サイズを動的に変更する

動的インライン スタイル値を適用する方法は多数あります。 数値を含む変数を使用して、フォント サイズをその数値に設定できます。

この変数は、props としてコンポーネントに渡すことができます。または、状態変数を作成してユーザーの入力を保存することもできます。

例を見てみましょう：

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>
  );
}

CodeSandbox でライブデモを見ることができます。

この場合、useState() フックを使用して、フォント サイズのピクセル数となる size 変数と、この値を更新するために使用される関数を含む setSize 変数の 2つの変数を定義しました。 .

size 変数の値を 12 に初期化しました。

この JSX コードには <input> 要素が含まれています。 onChange イベント ハンドラーをセットアップして入力フィールドの変更をリッスンし、setSize() 関数を使用して状態変数を更新できます。

最後に、インライン スタイルを設定してフォント サイズを指定します。 二重中括弧を使用する必要があることに注意してください。 1 組は JavaScript 式を評価するために必要であり、もう 1 組はオブジェクトを表すために必要です。

fontSize プロパティの値を指定するためにテンプレート横線を使用します。 size 状態変数が変更されると、fontSize CSS プロパティの値も変更されます。

三項演算子を使用して React で動的フォント サイズを生成する

React で動的にフォント サイズを生成する方法は多数あります。 たとえば、特定のブール値が true か false かに応じてフォント サイズを変更できます。

エラー メッセージを表示するアプリケーションがあるとします。 エラー メッセージを大きくしたい場合があります。

この場合、変数 error を設定できます。これは、エラーがある場合は true、エラーがない場合は false です。 次に、三項演算子を使用して fontSize 値を生成できます。

例を見てみましょう：

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>
  );
}

エラーがある場合、段落要素のサイズは 16 ピクセルになります。 そうでない場合は 12 になります。