反应在js文件之间传递变量

Question

我开始建立一个带有react的网站，我想拥有一个js文件，可以将所有文本和图像src放在一个位置，以便于访问和编辑，我可以使用导出和导入轻松地传递文本变量，但是我正在努力传递src图片，

在此示例中您可以看到：

Banner.js：

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

Index.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是我的组件，我想将变量传递给使用props，而index.js是我要导入所有变量的地方来自vars.js

文本可以正常显示，但是图像无法正常工作！

Answer 1

因为您不导入图像或不需要图像。您在这里有两个选择。

第一个

更改var.js中的导出。

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

第二个

在require中像这样使用Banner：

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

请不要忽略"" +部分，如果您执行require则不能使用您的变量。