React在js文件之間傳遞變量

Question

我開始用 react 構建一個網站，我想要一個 js 文件，我可以在一個地方將所有文本和圖像 src 放在一個地方，以便於訪問和編輯，我可以使用導出和導入輕松傳遞文本變量，但我很掙扎通過圖像src，

正如你在這個例子中看到的：

Banner.js：

<Img src={this.props.src} />
<h3>{this.props.text}</h3>

索引.js：

import {bannerSrc, bannerText} from './assets/js/vars.js'
//Render!
<Banner
    src= {bannerSrc}
    text= {bannerText}
    />

vars.js：

module.exports = {
    bannerSrc: "./assets/imgs/banner.jpg",
    bannerText: "Some text to appear in banner!"
}

在我的 Vars.js 文件中，我想擁有我所有的文本和圖像源，Banner.js 是我的組件，我想將變量傳遞給 using props，而 index.js 是我想從 vars 導入所有變量的地方。 js

文本渲染正常，但圖像不起作用！

Answer 1

因為您沒有導入或需要圖像。 您在這里有兩個選擇。

第一

在var.js更改導出。

module.exports = {
    bannerSrc: require( "./assets/imgs/banner.jpg" ),
    bannerText: "Some text to appear in banner!"
}

第二個

在Banner像這樣使用require ：

<img src={require( "" + props.src )} />
<h3>{props.text}</h3>

不要省略"" +部分，如果你確實require不能使用你的變量。