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 存儲庫中找到工作代碼。