javascript - 将包含函数的变量从 pug 传递到 react 组件

Question

问题

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

---

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

文件.jsx

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

(file.jsx) Console output: {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 函数会导致问题 - 这就是我的想法。

Answer 1

Use environmental variables

pug -> environment variable -> react

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

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

因此，为了从 pug 发送传递变量以使用react，您需要做的就是首先将您的变量传递给环境变量，然后让您的 react 文件访问该环境变量。