如何动态导入img答案

【问题标题】：how to dynamc import img如何动态导入img
【发布时间】：2020-05-14 13:52:58
【问题描述】：

我尝试动态更改反应刽子手项目的 img。所以我尝试了一个状态，但出现错误说Cannot convert object to primitive value

所以我尝试将动态导入的函数直接传递给我的 img，但这会产生无限循环。

这是函数

loadHangmanSvg() {
  const { attempts } = this.state
  const svgName = `hangman_${attempts}`
  import(`./assets/${svgName}.svg`).then(svgName => {
    this.setState({
      svgName
    });
  });
};

这是道具

svgHangman={this.loadHangmanSvg()}

感谢您的帮助：D

【问题讨论】：

你不应该在你的 react 组件的 render 方法中使用 this.loadHangmanSvg()。当您尝试this.setState() 时，组件将重新渲染，this.loadHangmanSvg() 将再次执行，这将导致无限循环。
您想澄清使用动态导入的原因吗？你想达到什么目标？根据命名hangman_${attempts}，我可能会建议您加载不同的刽子手图像以显示进行了多少次尝试。它看起来并不有效，也许在加载 svg 后动态更改片段可见性会更可取？
对，我想根据尝试次数显示正确的 svg。

标签： javascript reactjs create-react-app dynamic-import

【解决方案1】：

loadHangmanSvg() {
  const { attempts } = this.state
  const svgName = `hangman_${attempts}`
  import(`./assets/${svgName}.svg`).then(svgName => {
    // only when svgName is undefined, change the state of component
    if (!this.state.svgName) {
        this.setState({
            svgName
        });
    }
  });
};

【讨论】：