时间戳

首页 > 解决方案 > 将包含函数的变量从 pug 传递给反应组件

javascript - 将包含函数的变量从 pug 传递给反应组件

问题描述

问题

如何将包含 pug 文件中的函数的变量（我不认为它特定于 .pug 文件）传递给反应组件？

路由.js

const login = () => { ... 'log the user in here' ... };

app.get('/test', (req,res) => {
  res.render('page.pug', {varName: {list_test: ['hello', 'goodye'], login_func: login}});

page.pug

body
  script.
    var data = !{JSON.stringify(varName)}

文件.jsx 

// Imagine this being called from a react component's constructor
console.log(data);

(file.jsx) 控制台输出：{list_test: ['hello, 'goodye']}

注意函数'login'（以及它的关联键'login_func'）已经从变量中消失了？！

当变量包含函数时，下面列出的链接问题的答案不起作用，但它适用于字符串、数字、列表和对象。因此，这不是以下任何内容的重复：

将参数从 pug 传递到 JSX

将变量从玉文件传递到 React 组件

这有点道理（我考虑问题可能是什么 - 我可能错了）

当您对 JSON 对象进行字符串化时，我想将字符串转换为函数会很麻烦：

function sayHello() { console.log('Hello') }

var string = "sayHello"

现在以某种方式再次将该字符串转换为非字符串并指向 sayHello 函数会导致问题 - 这就是我的想法。

标签： javascriptnode.jsreactjswebpackpug

解决方案

使用环境变量

哈巴狗->环境变量->反应

Create React App 构建允许在应用程序中使用环境变量。要添加环境变量，请在项目的根目录中创建一个 .env 文件，然后添加适当的变量并在变量名称前加上 REACT_APP_。例如：

REACT_APP_MYVAR = "someString" 在应用程序中，可以使用 {process.env.REACT_APP_MYVAR} 在您的组件中访问这些变量，或者使用 %REACT_APP_MYVAR% 在 HTML 中访问这些变量。

因此，为了从 pug 发送一个变量来做出反应，您所要做的就是首先将您的变量传递给环境变量，然后让您的反应文件访问该环境变量。

推荐阅读