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

Question

路由代码：

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

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

h2= username

我想在我的 React 组件中显示此用户名对象，如下所示：

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

如何将此信息传递到我的 React 组件？谢谢

Answer 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));
}

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

How can I display data passed to the view from the express router in react?

express

reactjs

pug