Question

我有一个JS文件，用于呈现服务器文件用于客户端通过webpack接收的原始标记，尤其是需要在<head>中加载的内容，以避免出现任何静态.html文件在项目中。我＆＃39;已经＆＃39;在运行时从第三方脚本中定义了此文件中的一些配置变量：

import ReactDOMServer from 'react-dom/server';
... // other imports

`<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charSet="utf-8">
      <title>Page Title</title>
      <link rel="stylesheet" type="text/css" href="/assets/main.css">
      <script>
        var config1 = {
          key1: 'value1',
          key2: 'value2',
          key3: 'value3',
        };
        var config2 = [
          {
            someKey1: 'value1',
            someKey2: 'value2',
            someKey3: 'value3',
          },
          {
            someKey1: 'value4',
            someKey2: 'value5',
            someKey3: 'value6',
          },
          {
            someKey1: 'value7',
            someKey2: 'value8',
            someKey3: 'value9',
          },
        ]
        // other JS scripts like GTM for google tag manager, analytics etc
      </script>
      ....`;

我想在js文件中从配置文件而不是var声明中提取配置，如下所示：

configuration.js

/* eslint-disable no-unused-vars */

module.exports = {
  var config1 = {
    key1: 'value1',
    key2: 'value2',
    key3: 'value3',
  };
  var config2 = [
    {
      someKey1: 'value1',
      someKey2: 'value2',
      someKey3: 'value3',
    },
    {
      someKey1: 'value4',
      someKey2: 'value5',
      someKey3: 'value6',
    },
    {
      someKey1: 'value7',
      someKey2: 'value8',
      someKey3: 'value9',
    },
  ]
};

然后将它们用作..

import ReactDOMServer from 'react-dom/server';
import { config1, config2 } from '../src/configuration';
... // other imports


`<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charSet="utf-8">
      <title>Page Title</title>
      <link rel="stylesheet" type="text/css" href="/assets/main.css">
      <script>
        ${config1}
        ${config2}
        // other JS scripts like GTM for google tag manager, analytics etc
      </script>
....`;

但是当我查看页面源代码时，我得到的就是这个，而是期待变量值

[object Object]
[object Object],[object Object],[object Object]

如何导入配置变量，所以我不必过度拥抱我的渲染文件，因为这些配置是静态的，永远不会改变。

Answer 1

字符串插值${}会自动调用每个对象的.toString()属性，因此您会看到[object Object]。可以通过调用Object.prototype.toString.call( {} );来查看。

我可以建议的一件事是使用迭代来动态更新值。像${ Object.keys( config1 ).forEach( key => config1[ key ] )}这样的东西。

Answer 2

您可以将配置文件保存为.json，并使用json加载程序使用常规导入es6语句将数据导入组件。

如何在React HTML中导入JS变量

2 个答案: