JS 中的动态 import() 文件

Question

我需要导入标记文件动态切片文件的一部分并将结果添加到变量并在我的 React 应用程序中渲染结果：

import('../changelog.md').then(...) 

我试图render()用所有逻辑的方法来做到这一点，但我遇到了问题。我需要在哪里导入它（在类中或外部）以及如何获取将其粘贴到变量的承诺值？

Answer 1

这是一种方法：

class MyComponent extends React.Component {

    state = {html: null}

    componentDidMount() {
        import('../changelog.md').then(mod => {
            this.setState({html: mod.default})
        })
    }

    render() {
        return this.state.html ? <div dangerouslySetInnerHTML={{__html:this.state.html}} /> : <p>Loading...</p>
    }
}

假设您有一个.md加载器并且它返回 HTML。

import()返回一个 Promise。因此，您必须等待它解析才能渲染它。最简单的方法是在其中执行componentDidMount（React建议您将所有 ajax 请求放在那里，这有点类似），然后将其复制到状态中以在完成后强制重新渲染。