如何在webpack的反应渲染函数中使用ejs变量？

Question

我希望我的用户能够看到他们存储在MySQL数据库中的个性化信息。

我使用ejs / webpack / React。我也找到了以下答案，但它并没有考虑使用webpack：How to use an ejs variable inside a react render function?

所以，我认为在router.get里面将信息作为变量传递：

router.get('/profile', authenticationMiddleware(), function(req, res) {
    res.render('profile', { title: 'Profile', abcd: 'MySQL info') });
});

然后在profile.ejs中：

<script src='bundle.js'>
    window.abcd = '<%- abcd %>';
</script>

并在反应组件中

render: function(){
    return(
       <div>
            <p> {window.abcd} </p>
       </div>
    );
}

由于我使用的是webpack，我的.js文件无法看到window.abcd变量。

我不想使用POST方法，我不想在我的变量中使用外部.js文件。有没有干净的选择？

Answer 1

将window.abcd = '<%- abcd %>'放在script标记上方。执行bundle.js后，window.abcd将可用。

示例

<script>window.abcd = '<%- abcd %>'</script>
<script src='bundle.js'></script>

希望这有帮助！