React 入門

% curl http://127.0.0.1:8000/comments/3/ ⏎
{
  "id":3,
  "title":"<3個目>のコメント",
  "body":"<h1>コメントの本文3</h1>",
  "updated_at":"2023-11-21T11:03:00"
}

しかしながら，JSX ではタグ文字が自動的にエスケープされるので，安心して利用できます．図の通り，タグが単なる文字列として表示されています．

データベースから取得した内容をタグとしてそのまま処理する場合は次のようにします．

<div dangerouslySetInnerHTML={{ __html: props.comment.body }} />

Comment コンポーネント全体を示します．

src/components/Comment.tsx
import React from 'react'

interface CommentProps {
  comment: {
    id: number;
    title: string;
    body: string;
    updated_at: string;
  };
  onDelete: (id: number) => void;
}

const Comment: React.FC<CommentProps> = (props) => {

  const handleClickDeleteButton = () => {
    props.onDelete(props.comment.id);
  };

  return (
    <article>
      <div className="title">
        {props.comment.title}
      </div>
      <div className="body">
        {/* {props.comment.body} */}
        <div dangerouslySetInnerHTML={{ __html: props.comment.body }} />
      </div>
      <div className="deleteButton">
        <button
          onClick={handleClickDeleteButton}
        >
          削除
        </button>
      </div>
    </article>
  )
}

export default Comment

なお，JSX で処理をコメントアウトするには10行目のように {/* ... */} で囲います．しかし，複数あるコメントアウトのルールをすべて覚えるのは大変です．Visual Studio Code のショートカットキー Ctrl + / を使ってコメントアウトをすると Visual Studio Code が状況に応じて適切な方法でコメントアウトの処理を行ってくれるので，複雑なルールを覚える必要がありません．

ブラウザで確認すると本文に入力された見出しのタグが処理されて，見出しとして大きく表示されていることがわかります． （ユーザから入力された文字列に対してこのような処理を行うことは大変な危険を伴うので，動作を確認したら元の状態に戻しておくようにしてください．）

目次に戻る