Draft.jsで何も出てこない→出てるはず

Facebook社のReact用リッチエディタDraft.js。 Overview | Draft.jsにあるサンプルを試したけれど、何も出てこなかったときのメモ。

ソースコード

import React from 'react';
import {Editor, EditorState} from 'draft-js';
import 'draft-js/dist/Draft.css';

function MyEditor() {
  const [editorState, setEditorState] = React.useState(
    () => EditorState.createEmpty(),
  );

  return <Editor editorState={editorState} onChange={setEditorState} />;
}

export default MyEditor

このMyEditorコンポーネントを親コンポーネントから呼び出しています。

実行結果です。

何も出てきてません。いえ、実は出ています。Editorがあるあたりをクリックします。

そうするとカーソルが出てきます。何か文字を入力すると文字が出てきます。これがEditorの本体です。

見やすくするためにborderを入れましょう。

function MyEditor() {
  const [editorState, setEditorState] = React.useState(
    () => EditorState.createEmpty(),
  );

  return (
    <div style={{border: '1px solid #666666'}}>
      <Editor editorState={editorState} onChange={setEditorState} />
    </div>
  );
}

これで開発が始められそうです。

参考: reactjs - Can't figure out why draft-js is not shown - Stack Overflow