Question

我无法将变量从.jade文件传递到react组件。这是我的玉文件的一部分：

block content #example var user = '#{user}'; span #{user.id} span #{user.displayName}

这是app.jsx，我想要访问变量用户的反应组件。

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')
);

我已尝试从app.jsx将this.props.user和window.user记录到控制台，但未定义。理想情况下，我希望app.jsx中的this.props.user成为jade文件可以访问的用户。然后，我可以将该用户变量传递给HelloWorld组件，例如。也许有更好的方法可以做到这一点，而且，对于玉石的新手和反应，我当然会欣赏这些建议。

Answer 1

我还没有使用过React，我不确定React.render做了什么或它的论据是什么，所以这可能不适用。

要从服务器获取变量到客户端javascript，请尝试将json字符串模板化为html并从javascript加载它。 EJS处理报价逃逸，我认为Jade也是如此。作为参考，CameraActivity告诉Jade跳过转义，content!= safeString也是如此。

content !{safeString}

Answer 2

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

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

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

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

Answer 3

尝试this answer（我试图添加评论，但它不会让我）。

在你的玉石中，你将拥有：

script. var user = (!{JSON.stringify(user)});

然后，在React中：

React.render( <HelloWorld user={user} />, document.getElementById('example') );

小心在您不希望任何人看到的客户端中传递数据。

Answer 4

从类似的问题中复制my答案：

＆＃34;有一个名为react-helper（https://github.com/tswayne/react-helper）的快速（以及任何其他视图呈现节点框架）的库。它几乎处理了在视图中呈现反应组件并在任何节点框架中从服务器传递数据所需的所有操作。您只需为webpack创建一个入口点（js文件）（lib有一个可以为您生成webpack配置的cli）并在控制器和视图中添加一行，您的组件将在该页面上呈现。将数据传递到您的react组件非常简单：

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

还有反应辅助工具（https://github.com/tswayne/express-react-helper）的快速中间件，允许您添加可供所有视图使用的上下文，方便用户会话数据。

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

然后，您的所有反应组件都将具有用户道具，而无需手动将该逻辑添加到每个控制器操作。＆＃34;

库会为你呈现你的组件并将它存储到一个你可以传递给jade的变量中，然后在jade你就像打字一样打印变量。这将为您处理React.render，因此您不再需要在视图中，甚至是示例div。您的入口点只会注册＆＃34; HelloWorld组件，你很高兴。

Answer 5

更简单的方法来做出接受的答案：

将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"));

将变量从jade文件传递到React Component

5 个答案: