Question

添加资产路径变量的最佳方法是什么？

我正在开发一个具有不同资产目录的应用，具体取决于环境（本地，登台，制作）。

现在，我的所有图像路径都在JSX中进行了硬编码，在本地开发时工作得很好。但是，在暂存时，资产路径略有不同。

以下是我所谈论的简单例子。

render() {
    return (
        <div className="home-container">
            <img className="home-container__logo" src="/images/ui/logos/imagename.png" />
        </div>
    );
}

图片src属性指向"/images"。这在其他环境中可能不同。

是否有＆＃34;反应方式＆＃34;添加资产路径var或做相当于{% static 'images/ui/logos/imagename.png' %}的事情？

干杯

Answer 1

React中没有内置的资产路径助手，但你的直觉很好：这是一个很好的抽象，值得自己做。如果你正在使用webpack，你可以设置module resolve以包含root react文件夹的路径，然后一个简单的解决方案可能如下所示：

# app/helpers/AssetHelper.js
export default {
  imagePath: (path) => {
    return `/images/${path}`
  }
}

# your component
import { imagePath } from 'app/helpers/AssetHelper'

render() {
  return (
    <div className="home-container">
      <img className="home-container__logo" src=${imagePath('ui/logos/imagename.png')} />
    </div>
  );
}

如果您不使用Webpack或某些等效文件，则路径需要是相对的，这不是一个简单的解决方案。如果您使用的是webpack，请查看module resolve。它将允许您简化导入的文件路径。

使用模块解析的示例webpack配置：

# webpack.config.js
var path = require('path')

module.exports = {
  entry: ...,
  output: ...,
  resolve: {
    // specify your new path relative to the webpack config file
    modules: [path.resolve(__dirname, './app'), 'node_modules']
  }
}

使用React和JSX添加资产路径变量的最佳方法是什么？

1 个答案: