将变量从玉文件传递到 React 组件

Question

我在将变量从 .jade 文件传递​​到反应组件时遇到问题。 这是我的玉文件的一部分：

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

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

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

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

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}

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类似问题的答案：

“有一个库可以很好地与 express（和任何其他视图渲染节点框架）一起使用，称为 react-helper (https://github.com/tswayne/react-helper)。它几乎可以处理您在视图中渲染 react 组件所需做的所有事情并通过在任何节点框架中从服务器向它们发送数据。您只需为 webpack 创建一个入口点（js 文件）（lib 有一个可以为您生成 webpack 配置的 cli）并在控制器和视图和组件中添加一行将在该页面上呈现。将数据传递到您的 React 组件非常简单：

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 组件都将拥有 user 属性，而无需手动将该逻辑添加到每个控制器操作中。”

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

Answer 5

一种更简单的接受答案的方法：

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

file.pug

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

1. 在组件中包含变量

file.jsx

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

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