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

file.jsx

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

（file.jsx）控制台输出：{list_test：['hello，'goodye']}

请注意，函数“登录”（及其关联的键“ 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

使用环境变量

pug->环境变量->反应

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

REACT_APP_MYVAR =“ someString” 在应用程序中，可以使用{process.env.REACT_APP_MYVAR}在组件中访问这些变量，也可以使用％REACT_APP_MYVAR％在HTML中访问这些变量。

因此，要从pug发送传递变量以做出反应，您要做的就是简单地先将变量传递给环境变量，然后让React文件访问该环境变量。

将包含函数的变量从pug传递给react组件

1 个答案: