从Jade文件传递一个变量到React组件

Question

我遇到了从.jade文件传递变量到react组件的困难。

这是我的jade文件的一部分:

block content #example 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')
);

我曾尝试从app.jsx将this.props.user和window.user记录到控制台，但是都未定义。理想情况下，我希望在app.jsx中使用this.props.user时，能够访问jade文件中的用户。这样，我就可以将该用户变量传递到HelloWorld组件中。也许有更好的方法来实现这一点，而我作为新手，肯定会感激任何建议。

- pdorns

---

你解决了这个问题吗？如果是，让我也知道，因为我也遇到了同样的问题。 - Manoj Rammoorthy

Answer 1

我没有使用过React，不确定React.render是做什么的或其参数用于什么，因此可能不适用。

要从服务器传递变量到客户端JavaScript，请尝试将JSON字符串模板化到HTML中，并从JavaScript中加载它。EJS处理引号转义，我认为Jade也是如此。供参考，content！= safeString告诉Jade跳过转义，content！{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}

- Plato

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。

- David Hellsing

Answer 3

更简单的实现方式：

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

- user3236637

Answer 4

尝试这个答案（我已经尝试添加评论，但它不允许我）。

在您的jade中，您将拥有：

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

然后，在React中：

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

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

- ericat

Answer 5

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

"有一个与express（和任何其他视图渲染节点框架）配合良好的库，叫做react-helper(https://github.com/tswayne/react-helper)。它几乎处理了您需要在任何节点框架中呈现反应组件并从服务器向其传递数据的所有内容。您只需为webpack（该库具有可以为您生成webpack配置的cli）创建一个入口点（js文件），并在控制器和视图中添加一行，您的组件将在该页面上呈现。将数据传递到您的反应组件非常简单：

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

还有一个专为react-helper (https://github.com/tswayne/express-react-helper)设计的快速中间件，可以让您添加上下文以便所有视图都可用，这对于用户会话数据非常方便。

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

然后，所有的React组件都将具有用户属性，而无需手动将该逻辑添加到每个控制器操作中。

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

- Tyler