Question

我需要动态导入标记文件的文件部分，并将结果添加到变量中并在我的React应用中呈现结果：

this.dog = props.dog

我尝试使用所有逻辑在import('../changelog.md').then(...)方法中执行此操作，但是我遇到了问题。我需要在哪里（在课堂上还是在课堂上）导入它，以及如何获得将其粘贴到变量中的promise的价值？

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中进行操作（反应recommends，您将所有的ajax请求都放在那里，这有点类似），然后将其复制到状态以在完成后强制重新渲染

Answer 2

像这样在开始时导入您的.md文件。

import yourMDObject from '../changelog.md';

然后您可以像这样使用fetch()

fetch(yourMDObject).then(obj =>obj.text()).then(..)

JS中的动态import（）文件

2 个答案: