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

Question

我正在尝试学习如何使用本指南使用“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' ）。

我 go 如何以这种方式导入图像？
感谢您的时间。

完整代码供参考：

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;

Answer 1

你的代码有错误。

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

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

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

您可以从此git 存储库中找到工作代码。