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

【问题标题】：Pass a variable containing a function from pug to react component将包含函数的变量从 pug 传递给反应组件
【发布时间】：2018-08-19 11:41:41
【问题描述】：

问题

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

route.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)}

file.jsx

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

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

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

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

Pass a param from pug to JSX

Passing a variable from a jade file to a React Component

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

当你对JSON对象进行字符串化的时候，我想把字符串变成函数会很麻烦：

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

var string = "sayHello"

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

【问题讨论】：

简短回答：你不能。考虑编写和执行函数的上下文。哈巴狗在某处的某个服务器上，反应正在某人笔记本电脑上的浏览器上运行。这就是 HTTP 请求存在的原因
@azium 你能想到任何解决方法吗？我必须以某种方式完成这项工作。等等……我太傻了。我将变量从 .js 文件传递到 pug 文件。那么为什么我不直接在我的反应文件中导入那个 .js 文件，以便我可以从组件中访问它呢？！？！我太傻了！
这不是一种解决方法.. 在执行该功能的服务器上创建一个端点，然后使用 fetch 或您喜欢的任何 http 库（例如 axios）从您的客户端代码发出 HTTP 请求

标签： javascript node.js reactjs webpack pug

【解决方案1】：

使用环境变量

pug -> 环境变量 -> 反应

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

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

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

【讨论】：