【问题标题】：Passing variables to React compiled app from Index.html to controller.js从 Index.html 到 controller.js 将变量传递给 React 编译的应用程序
【发布时间】：2019-04-18 17:13:51
【问题描述】：

我正在尝试将变量从 index.html 传递到我的 react 应用程序，该应用程序在本地 express/node 服务器上编译和运行。我尝试使用窗口对象，但 node.js 无法识别窗口对象。

基本上一旦应用程序加载 index.html 从查询字符串中获取用户信息并将数据发送到 userController。见下面的代码

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="telephone=no" name="format-detection">
    <meta content="no" name="msapplication-tap-highlight">
    <meta content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width" name="viewport">
    <title>App Frontend</title>
</head>

<body>
    <div id="root"></div>
    <script src="js/compiledscript.js"></script>
    <script>
        new AppCode({
            root: document.getElementById('root'),
            host: 'http://localhost:3500',
            endpoints: {
                folder: '/api/folder',
                file: '/api/file'
            },
            headers: {
                'Content-Type': 'application/json'
            }
        });

        //Get iframe data query from parent
        function getParamValue(paramName)
        {
            var url = window.location.search.substring(1); //get rid of "?" in querystring
            var qArray = url.split('&'); //get key-value pairs
            for (var i = 0; i < qArray.length; i++) 
            {
                var pArr = qArray[i].split('='); //split key and value
                if (pArr[0] == paramName) 
                    return pArr[1]; //return value
            }
        }

        var userData = {
            username: getParamValue('username'),
            userid: getParamValue('userid')
        }

        window.userData = userData;
        //console.log(getParamValue('username'));
        //console.log(getParamValue('userid'));


    </script>

</body>

</html>

userController.js

const mongoose = require('mongoose');
const path = require('path');
const fs = require('fs');

const User = mongoose.model('User');
//const users = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'data', 'users.json'), 'utf-8'));

/*
const users = window.userData;
const userid = users.userid;
exports.userid = userid; 
*/


exports.getAll = async (req, res) => {
    const users = await User.find();
    res.json(users);
};


exports.bang = async (req, res, next) => {
    await User.remove();
    next();
};


exports.addNewUser = async (req, res, next) => {
    await User.create(users);
   // next();
};

【问题讨论】：

您可以改为读取最顶层 React 组件的 componentDidMount 中的查询字符串。

标签： node.js reactjs express

【解决方案1】：

如果您将 HTML 文件作为静态文件发送，

你可以这样做：

解决方案：

通过运行命令npm i ejs 安装ejs，然后将您的文件从index.html 更改为index.ejs，

将此行添加到您的应用中 app.set('view engine', 'ejs'); 并通过

发送文件

res.render('index.ejs', {
 // here data to pass
});

然后您可以将数据传递给index.ejs，它将被渲染

您可以阅读docs in here，它会更清楚地显示图像。

如果你可以使用服务器端渲染

那么redux 将是解决方案

【讨论】：

我正在使用 const router = express.Router();在我的 index.js 路由文件中
我已经在应用程序中看到了这个。 app.set('view engine', 'pug');
如果您将视图引擎设置为 pug 为什么不使用它？
我正在编码/更新现有应用程序，因此 app.js 中已有的一些内容我不知道设置。边走边学。只需要将 index.html 中的数据传递到应用程序的其他部分。
你到底想做什么（应用在做什么）（服务器端渲染，客户端渲染）？