如何在反应中显示从快速路由器传递到视图的数据？

【问题标题】：How can I display data passed to the view from the express router in react?如何在反应中显示从快速路由器传递到视图的数据？
【发布时间】：2016-02-25 01:28:18
【问题描述】：

路由代码：

router.get('/', function(req, res) {
  res.render('index', {username: req.session['passport']['user']['username']});
}

在我的翡翠模板中，我可以很容易地像这样显示数据：

h2= username

我想在我的 react 组件中显示这个用户名对象，如下所示：

var Account = React.createClass({
  render: function(){
    return (
      <h2>
        {username}
      </h2>
    )
  }
});

如何将此信息传递给我的反应组件？谢谢。

【问题讨论】：

标签： express reactjs pug

【解决方案1】：

您可以通过多种方式获取这些数据。

将数据嵌入到您的 DOM 或 script 标记中，在您加载脚本并渲染您的 React 组件后，从 DOM 中获取数据。

<div class="data" style="display: none;" data-data="YOUR DATA GOES HERE STRINGIFIED" />

React.render(<YourComponent data={document.querySelector('.data').dataset.data} />, document.querySelector('.yourContainer'));

或为您的数据打开一个端点

router.get('/myData', function(req, res) {
  res.render({username: req.session['passport']['user']['username']});
}

然后在你的组件中，使用生命周期方法componentDidMount 获取它。

componentDidMount: function () {
   someAjaxLib.get('/myData').success(function (data) {
      this.setState({data: data});
   }.bind(this));
}

【讨论】：