react markdown の実装

Jump to bottom

Makio Karasawa edited this page Feb 22, 2023 · 1 revision

ドキュメントには下記のように記載がある。

import React from 'react';
import ReactMarkdown from 'react-markdown';
import ReactDom from 'react-dom';

ReactDom.render(
  <ReactMarkdown># Hello, *world*!</ReactMarkdown>,
  document.body
);

しかし実際は

import { useState } from 'react';
import ReactMarkdown from 'react-markdown';

...

function App() {
  const [str, setStr] = useState('');

  return (
    ...

            <label id='label-output'>
              <ReactMarkdown>{str}</ReactMarkdown>
            </label>
    ...

export default App;

のように、ReactMarkdown をコンポーネントに見立ててその中にテキストエリアで入力している state の変数を出力してあげるだけで良い。

参考文献