目次
Material-UI の ListItemText
に HTML を安全に挿入する方法
Material-UI は、React で美しくて機能的な UI を素早く構築するためのライブラリです。
しかし、ListItemText
のようなコンポーネントに HTML 文字列を直接挿入することは、デフォルトのプロパティだけでは難しい場合があります。
この記事では、ListItemText
内に HTML コンテンツを安全に挿入する方法について説明します。
手順
- 必要な依存関係のインストール
Material-UI のコアライブラリをインストールします。
npm install @material-ui/core
- HTML コンテンツの挿入
以下は、ListItemText
コンポーネントの内部に Typography
コンポーネントを配置し、その中に dangerouslySetInnerHTML
を使用して HTML 文字列を挿入する例です。
import React from 'react'; import { ListItem, ListItemText, Typography } from '@material-ui/core'; function MyComponent() { const myHtmlContent = "Hello<br />world!"; return ( <ListItem> <ListItemText> <Typography component="span" dangerouslySetInnerHTML={{ __html: myHtmlContent }} /> </ListItemText> </ListItem> ); } export default MyComponent;
注意点
dangerouslySetInnerHTML
を使用する際は、必ず注意してください。
不適切な HTML コンテンツやスクリプトをそのまま挿入することで、XSS(クロスサイトスクリプティング)のリスクが発生する可能性があります。
常にコンテンツが安全であることを確認し、信頼できないソースからのコンテンツを直接挿入しないようにしてください。