Question

首先让我说对不起，如果这是一个简单的问题，我是新来的反应和表达，并且无法在SO上找到答案。

我正在尝试将数据传递给反应对象，并根据passport.js返回路径呈现视图。

我有需要传递的对象我无法弄清楚如何传递它。

首先，用户点击身份验证路径

R = [2,3,1,2,3]

然后他们通过蒸汽登录后，他们将返回这条路线：

router.get('/steam',
    passport.authenticate('steam'),
    (req, res) => {
    //Not used
});

从这里开始，我将它们传递到/ dashboard路由，我将获取用户对象并创建另一个调用以获取其库，然后将数据发送到视图：

router.get('/steam/return',
    passport.authenticate('steam', { failureRedirect: '/' }),
    (req, res) => {
        res.redirect('/dashboard');
});

我能够通过把手在仪表板视图中获取我需要的所有数据，但我面临的问题是我可以做什么来将owngames数据传递给另一个JS文件中的react对象。我在另一个文件中设置了react组件，该文件通过bundle文件加载到仪表板。我假设这需要去服务器，但我不确定如何实现这一点。

Answer 1

有几种方法可以执行此操作，具体取决于React组件如何管理其状态。

反应状态（RxJS，mobx，nx-observe）：最容易处理的是，您的组件以及非js代码都可以访问这些商店并一起了解更新。这在数据提供者和消费者之间提供了非常松散的耦合。
具有助焊剂图案的组件：如果您的组件使用Redux，Reflux或任何其他基于通量的库来管理状态，您可以从您的通用代码中导出相应的操作/功能，任何JavaScript代码都可以调用它来更新组件的状态。
在组件内维护状态：有点乱。在这种情况下，您的组件可以导出脚本可以调用的回调以向其发送新数据。

Answer 2

你的问题不是关于reactjs或passportjs。它基本上是我们如何将服务器端javascript中的变量传递给客户端javascript。因此，您可以在客户端使用的任何框架中使用该变量。

实现此目的的最简单方法是将您的值作为模板中内联脚本标记中的变量声明。因此，您的客户端js将具有一个具有该值的全局变量，该变量可以从客户端脚本中的任何位置进行访问。

例如，如果变量的字符串值如下

var test = 'abc';

您可以在模板中将其呈现为脚本标记中的变量声明。

res.render('template', test)

模板文件：

<script>
    var test = '{{test}}';
</script>

现在，此模板将生成如下HTML页面。

<script>
    var test = 'abc';
</script>

所以test变量将是一个值为'abc'的全局客户端javascript变量，可以从同一页面上的任何其他javascript代码访问。

尽管如上所述对于字符串变量这很简单，但在尝试发送对象时，事情会变得复杂。因为对象变量在模板中呈现为[Object object]。为避免这种情况，您需要在向对象模板发送之前发送对象的stringify版本。

var data = JSON.stringify({ user: req.user, games: resObj.response.games});
res.render('dashboard', data);

然后，除了原始内容之外，您的dashboard模板还需要包含变量声明的脚本标记。

//...
<script>
    var data = {{data}};
</script>
//...

现在，data将成为您客户端的全局变量，您可以在您的reactjs代码中使用它来访问user和games。