importしたmdファイルから文字を取り出すには。

Question

####importしたmdファイルから文字を取り出すには。
importしたmdファイルから文字を取り出すにはどうすればよいのでしょうか？
下に省略したコードを書きますが、このとき結果は/static/media/blog-post.1というように場所が出てしまいます。

import post1 from './blog-post.1.md';

<Markdown>
    {post1}
 </Markdown>

どうやればpost1から文字を取り出せるのでしょうか？
ちなみに以下のようにするときちんと「あ」がマークダウンとして記述されますので、タグは間違いではありません。

const a =  "#あ";
<Markdown>
    {a}
 </Markdown>

どうかimportしたmdファイルから文字を取り出す方法、ご教示いただきたいです。

Comments

[raccy]

本来のJavaScriptにはMarkdownをimportするような機能はありません。ですので、PercelやWebpack等を用いているかと思います。また、Markdownというコンポーネントも標準では存在せず、何かのライブラリや自分でコードを書いているかとも思います。そういった環境がわからないと質問のコードを再現ができず、どうやったらうまくいくのかも確かめることができないため、答えることは難しくなります。パッケージングやライブラリに何を使っているのか、また、設定等はどのような内容なのかも追記してください。

[hood]

コメントありがとうございます。
わかりました。実はサンプルコードをローカルで実行しているので、私自身どんなものを使っているのかまだよくわかっていません。
それらがわかったら追記したいと思います。

Answer 1

こんにちは

どうかimportしたmdファイルから文字を取り出す方法、ご教示いただきたいです。

Markdown記法で書かれたテキストを、適切にHTMLに変換してくれるモジュールについては、ちょっと探してみた限りでもいくつか選択肢がありそうですが、それらのうちどれを使うかに関わらず、

importしたmdファイル

の内容を取得するには、以下のようにすればよいかと思います。

import React, { Component } from 'react'

import post1 from './blog-post.1.md'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { md: "" }
  }

  componentDidMount() {
    fetch(post1)
      .then((res) => res.text())
      .then((md) => {
        this.setState({ md })
      })
  }

  render() {
    return (
      <pre>{this.state.md}</pre>
    )
  }
}

export default App

• 動作確認用のサンプル: jun68ykt/q202764

上記の App をマウントしてrenderさせると、blog-post.1.md の内容が（Markdown のソースコードのままで）、<pre> で囲まれて表示されます。

以上、参考になれば幸いです。

Comments

[hood]

回答ありがとうございます！
fetchでとってくる動作が必要だったのですね・・・そのまま入れることができるのだと勘違いしていました！まさに知りたかったのはこれです。返す返すありがとうございます！

[jun68ykt]

解決されたようですね、よかったです ????