React 変数を文字列に含める

1. 文字列連結を使用して React 変数を文字列に含める
2. テンプレート リテラルを使用して React 変数を文字列に含める

今日、React は、動的機能を備えた高速な Web アプリケーションを構築するためのおそらく最良のライブラリです。 React は、HTML に似たテンプレート言語 JSX を使用します。 ただし、中括弧で囲まれている限り、JavaScript 式を実行できるなど、多くの利点があります。

文字列連結を使用して React 変数を文字列に含める

単純な連結を動的に使用して文字列を生成することができます。 シンプルな + 演算子または concat() メソッドを使用して、複数の文字列を連結できます。

たとえば、動的な className 文字列を生成したいとします。 文字列連結を使用して動的な className 値を生成する方法の例を想像してみましょう:

export default function App() {
  const [type, setType] = useState("large");
  return (
    <div className={type + "Box"}>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

type 状態変数を large 文字列に初期化します。 JSX では、type 変数の文字列値 (large) と Box 文字列を連結して、<div> 要素の className 属性を設定します。

ソース HTML を見ると、コンテナの class が largeBox であることがわかります。

setType 関数を使用して type 状態変数の値を変更できます。 className の文字列値も変更されます。

これにより、コンテナの className 値を動的に変更して、コンポーネントの外観をカスタマイズできます。

同じ原則を使用して、3つ以上の文字列を連結できます。 単語間にスペースが必要な場合は、手動で追加してください。

<h1>{firstWord + " " + secondWord}</h1>

注: JSX 内で JavaScript 式を実行するには、それらを中かっこで囲む必要があります。

この例のライブ デモは CodeSandbox で 利用できるので、連結がどのように機能するかを自分で確認できます。

テンプレート リテラルを使用して React 変数を文字列に含める

多くのフロントエンドは、より洗練されたテンプレート リテラルを使用して、文字列内の変数を特徴付けることを好みます。 それらは通常の文字列のように見えます。 唯一の違いは、一重引用符または二重引用符を使用する代わりに、バッククォート (``) を使用してテンプレート リテラルをマークすることです。

また、ドル記号と中括弧を使用して、文字列内に式を埋め込むこともできます。 この機能は ES6 で導入されたため、JavaScript への比較的新しい追加です。

最初の例をもう一度見てみましょうが、今回はテンプレート リテラルを使用して文字列に変数を含めます。

export default function App() {
  const [type, setType] = useState("large");
  return (
    <div className={`${type}Box`}>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

この場合、type 変数はその文字列値に置き換えられます。 最終的には、まだ className 属性の largeBox 文字列値があります。

テンプレート リテラルは、多くの場合、単純な連結よりも読みやすいです。 たとえば、文字列に多くの変数がある場合、単語間にスペースを入れる方がはるかに簡単です。