【保存版】ReactJS で改行タグを挿入する全方法：サンプルコード付き

2024-06-29

ReactJS で2つの文字列間に タグを追加する方法

方法 1: JSX を直接使用する

最もシンプルな方法は、JSX 内で直接   タグを記述することです。

const MyComponent = () => {
  return (
    <div>
      {string1}
      <br />
      {string2}
    </div>
  );
};

方法 2: テンプレートリテラルを使用する

テンプレートリテラルを使用すると、より柔軟な表現が可能になります。

const MyComponent = () => {
  const string1 = 'Hello';
  const string2 = 'World!';

  return (
    <div>
      {string1}
      {`\n`}
      {string2}
    </div>
  );
};

dangerouslySetInnerHTML プロパティを使用すると、HTML 文字列を直接レンダリングできます。ただし、セキュリティ上のリスクがあるため、注意が必要です。

const MyComponent = () => {
  const string1 = 'Hello';
  const string2 = 'World!';

  return (
    <div dangerouslySetInnerHTML={{ __html: `${string1}<br />${string2}` }} />
  );
};

方法 4: map 関数と配列を使用する

map 関数と配列を使用して、複数の文字列を処理する場合に便利です。

const MyComponent = () => {
  const strings = ['Hello', 'World!'];

  return (
    <div>
      {strings.map((string, index) => (
        <span key={index}>
          {string}
          {index < strings.length - 1 && <br />}
        </span>
      ))}
    </div>
  );
};

これらの方法の中から、状況に応じて適切な方法を選択してください。

補足:

上記の例では、改行タグ   を使用していますが、React.Fragment を使用して空の要素を作成する方法もあります。
dangerouslySetInnerHTML プロパティを使用する場合は、XSS 攻撃などのセキュリティ対策を講じる必要があります。

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      Hello
      <br />
      World!
    </div>
  );
};

export default MyComponent;

import React from 'react';

const MyComponent = () => {
  const string1 = 'Hello';
  const string2 = 'World!';

  return (
    <div>
      {string1}
      {`\n`}
      {string2}
    </div>
  );
};

export default MyComponent;

方法 3: dangerouslySetInnerHTML プロパティを使用する

import React from 'react';

const MyComponent = () => {
  const string1 = 'Hello';
  const string2 = 'World!';

  return (
    <div dangerouslySetInnerHTML={{ __html: `${string1}<br />${string2}` }} />
  );
};

export default MyComponent;

import React from 'react';

const MyComponent = () => {
  const strings = ['Hello', 'World!'];

  return (
    <div>
      {strings.map((string, index) => (
        <span key={index}>
          {string}
          {index < strings.length - 1 && <br />}
        </span>
      ))}
    </div>
  );
};

export default MyComponent;

これらのコードを実行すると、以下の結果が表示されます。

Hello
World!

各方法の詳細については、上記の解説を参照してください。

ReactJS で2つの文字列間に タグを追加するその他の方法

カスタムコンポーネントを使用する

  タグを挿入するカスタムコンポーネントを作成することで、コードをよりモジュール化し、再利用しやすくなります。

const MyBreak = () => <br />;

const MyComponent = () => {
  return (
    <div>
      {string1}
      <MyBreak />
      {string2}
    </div>
  );
};

正規表現を使用して、文字列内の改行文字を   タグに置き換えることができます。

const MyComponent = () => {
  const string = 'Hello\nWorld!';
  const modifiedString = string.replace(/\n/g, '<br />');

  return (
    <div dangerouslySetInnerHTML={{ __html: modifiedString }} />
  );
};

サードパーティ製のライブラリを使用する

react-newline-to-break などのサードパーティ製のライブラリを使用して、改行文字を   タグに自動的に変換することができます。

import React from 'react';
import NewlineToBreak from 'react-newline-to-break';

const MyComponent = () => {
  const string = 'Hello\nWorld!';

  return (
    <div>
      <NewlineToBreak text={string} />
    </div>
  );
};