Material-UI の ListItemText に HTML を安全に挿入する方法

Material-UI は、React で美しくて機能的な UI を素早く構築するためのライブラリです。

しかし、ListItemText のようなコンポーネントに HTML 文字列を直接挿入することは、デフォルトのプロパティだけでは難しい場合があります。

この記事では、ListItemText 内に HTML コンテンツを安全に挿入する方法について説明します。

手順

1. 必要な依存関係のインストール

Material-UI のコアライブラリをインストールします。

npm install @material-ui/core

1. HTML コンテンツの挿入

以下は、ListItemText コンポーネントの内部に Typography コンポーネントを配置し、その中に dangerouslySetInnerHTML を使用して HTML 文字列を挿入する例です。

import React from 'react';
import { ListItem, ListItemText, Typography } from '@material-ui/core';

function MyComponent() {
  const myHtmlContent = "Hello
world!";

  return (
    <ListItem>
      <ListItemText>
        <Typography
          component="span"
          dangerouslySetInnerHTML={{ __html: myHtmlContent }}
        />
      </ListItemText>
    </ListItem>
  );
}

export default MyComponent;

注意点

dangerouslySetInnerHTML を使用する際は、必ず注意してください。

不適切な HTML コンテンツやスクリプトをそのまま挿入することで、XSS（クロスサイトスクリプティング）のリスクが発生する可能性があります。

常にコンテンツが安全であることを確認し、信頼できないソースからのコンテンツを直接挿入しないようにしてください。