React 17.0.1 - 使用动态路径导入组件

如何解决React 17.0.1 - 使用动态路径导入组件

我正在尝试学习如何使用 this guide 使用“useState”挂钩，但我似乎无法使用动态路径导入图像，因此当我单击按钮时，元素会获得新路径并发生变化图像。

以下是该指南导入图像的方式：

...
function App() {
  const [firstDieResult,setFirstDieResult] = useState(1);
  const [secondDieResult,setSecondDieResult] = useState(6);
  
  const firstDieImage = require(`./assets/${firstDieResult}.png`);
  const secondDieImage = require(`./assets/${secondDieResult}.png`);
...

但是，当我尝试以这种方式导入图像时，它不会导入它们。我是这样导入它们的：

import React,{useState} from 'react';
import './App.css';
import firstDieImage from './assets/1.png'
import secondDieImage from './assets/2.png'

function App() {
...

但是当我以这种方式导入它们时，我无法导入动态路径（例如 import firstDieImage from './assets/${firstDieResult}.png'）。

如何以这种方式导入图像？
感谢您抽出宝贵时间。

完整代码供参考：

import React,{useState} from 'react';
import './App.css';
import firstDieImage from './assets/1.png'
import secondDieImage from './assets/2.png'

function App() {

  const [firstDieResult,setFirstDieResult] = useState(1)
  const [secondDieResult,setSecondDieResult] = useState(6)
  console.log(secondDieResult)
  
  //Commented out parts work in the guide,but not for me
  //const firstDieImage = require('./assets/1.png')
  //const secondDieImage = require('./assets/2.png')
  //const firstDieImage = require('./assets/${firstDieResult}.png')
  //const secondDieImage = require('./assets/${secondDieResult}.png');

  return (
    <div className="App">
      <header className="App-header">
        <div style={{ display: 'flex',margin: 20 }}>
          <img src={firstDieImage} className="die" alt="Die one" />
          <img src={secondDieImage} className="die" alt="Die two" />
        </div>
        <span>firstDieResult + secondDieResult</span>
        <button className="button">Roll</button>
      </header>
    </div>
  );
}

export default App;

解决方法

您的代码有误。

const firstDieImage = require('./assets/${firstDieResult}.png')

您应该使用反引号字符 (`) 而不是单引号 (')。如果您使用 create-react-app 模块创建项目，请像这样更新代码：

const firstDieImage = require(`./assets/${firstDieResult}.png`).default

您可以在此 git repo 中找到工作代码。