Node.js 将变量从jade文件传递到React组件

将变量从.jade文件传递到react组件时遇到问题。 这是我的翡翠档案的一部分：

块内容
#范例
var user='#{user}'；
span{user.id}
span{user.displayName}

这里是app.jsx，我希望能够访问变量user的react组件

var React = require('react');
var HelloWorld = require('./HelloWorld.jsx');
var $ = jQuery = require('../../libraries/jquery/dist/jquery');
var bootstrap = require('../../libraries/bootstrap-sass-official/assets/javascripts/bootstrap');

React.render(
    <HelloWorld/>,
    document.getElementById('example')
);

var React=require（'React'）；
var HelloWorld=require（'./HelloWorld.jsx'）；
var$=jQuery=require（'../../libraries/jQuery/dist/jQuery'）；
var bootstrap=require（'../../libraries/bootstrap-sass-official/assets/javascripts/bootstrap'）；
反应(
,
document.getElementById（'示例'）
);

---

我已尝试从app.jsx将

this.props.user

和

window.user

记录到控制台，但未定义。理想情况下，我希望app.jsx中的

this.props.user

成为jade文件可以访问的用户。例如，我可以将该用户变量传递到HelloWorld组件中。也许有更好的方法可以做到这一点，作为jade和react的新手，我当然会感谢您的建议。

我没有使用react，我不确定react.render是做什么的，或者它的参数是什么，所以这可能不适用

要从服务器到客户端javascript获取变量，请尝试将json字符串模板化为html并从javascript加载它。EJS负责报价逃逸，我认为Jade也负责。供参考<代码>内容！=safeString告诉Jade跳过转义，

内容也是如此！{safeString}

- var user={id:1, displayName:'foo'}
#example
  meta(data-userJSON=JSON.stringify(user))
script(src="//code.jquery.com/jquery-1.11.3.min.js")
script.
  var user = JSON.parse(
    $('#example meta').attr('data-userJSON')
  )
  console.log(user);
span #{user.id}
span #{user.displayName}

---

可以在渲染之前手动提取DOM属性，例如：

var node = document.getElementById('example')
var user = {
  id: node.children[0].textContent,
  displayName: node.children[1].textContent
}

React.render(<HelloWorld user={user} />, node)

var node=document.getElementById（'示例'）
变量用户={
id:node.children[0]。textContent，
displayName:node.children[1].textContent
}
React.render（，节点）

但是我可能会建议您使用JSON或ajax来获取数据，而不是解析DOM。

试试看（我已经尝试添加注释，但它不允许我这样做）

在您的翡翠中，您将拥有：

脚本。
var user=（！{JSON.stringify（user）}）

然后，在反应中：

React.render(
,
document.getElementById（'示例'）
);

小心在你不想让任何人看到的客户端中传递数据。
复制类似问题的答案：

“有一个名为react helper（）的库可以很好地与express（以及任何其他视图渲染节点框架）配合使用。它几乎可以处理在视图中渲染react组件并在任何节点框架中从服务器向其传递数据所需的一切。您只需为webpack创建一个入口点（js文件）（lib有一个cli，可以为您生成网页包配置）并向控制器和视图添加一行，您的组件将在该页面上呈现。将数据传递到react组件非常简单：

const component = reactHelper.renderComponent('MyComponent', {user: 
req.session.user || ''})
res.render('view-to-render', {component})

还有react helper（）的express中间件，它允许您添加可用于所有视图的上下文，这对于用户会话数据来说很方便

app.use(function(req, res, next) {
 req.reactHelperContext.user = req.session.user || '';
});

然后，所有react组件都将具有用户道具，而无需手动将该逻辑添加到每个控制器操作。”

库将为您呈现组件并将其存储到一个变量中，您可以将该变量传递给jade，然后在jade中，您只需像打印字符串一样打印该变量。这将为您处理React.render，因此您不再需要在视图中甚至示例div中使用它。您的入口点将只是“注册”HelloWorld组件，您就可以开始了。
一种更简单的方法来完成公认的答案：

将pug变量转换为json对象
file.pug

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

在组件中包含变量
file.jsx

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>It works {data.name} </h1>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("react-target"));

类应用程序扩展了React.Component{
render（）{
返回(
它工作于{data.name}
);
}
}
render（，document.getElementById（“react目标”）；
您是否解决了此问题？如果是，请让我也知道，即使我面临同样的问题