reactjs - 在React中动态加载Markdown文件

Question

我使用markdown-to-jsx在我的 React 组件中渲染 markdown。

我的问题是我想动态加载 markdown 文件，而不是使用 import 指定它。这种情况发生在文章详细信息页面上，即我从路由参数中获取 articleId ，然后根据该 id，我想加载相应的 markdown 文件，例如article-123.md。

这是我到目前为止所拥有的。如何动态加载md文件？

import React, { Component } from 'react'
import Markdown from 'markdown-to-jsx';
import articleMd from './article-123.md'

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

  componentWillMount() {
    fetch(articleMd)
      .then((res) => res.text())
      .then((md) => {
        this.setState({ md })
      })
  }

  render() {
    return (
      <div className="article">
        <Markdown children={this.state.md}/>
      </div>
    )
  }
}

export default Article

这工作正常，但如果我删除顶部的 importarticleMd from './article-123.md' ，而是直接传递文件路径来获取它，输出看起来像索引.html，不是预期的 md 文件。

Answer 1

你不能使用dynamic import吗？ ？

class Article extends React.Component {
    constructor(props) {
        super(props)
        this.state = { md: '' }
    }

    async componentDidMount() {
        const articleId = this.props.params.articleId; // or however you get your articleId
        const file = await import(`./article-${articleId}.md`);
        const response = await fetch(file.default);
        const text = await response.text();

        this.setState({
            md: text
        })
    }

    render() {
        return (
            <div className="article">
                <Markdown children={this.state.md} />
            </div>
        )
    }
}