如何在react-component中显示从express路由器发送的数据?

时间:2015-11-18 22:12:32

标签: express reactjs

路由代码:

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

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

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

显然,上面的'用户名'结果是未定义的错误。如何在反应组件中访问路由器提供的这些数据?

感谢。

1 个答案:

答案 0 :(得分:2)

常见的模式是在安装时从组件中获取数据。例如,想象一下与API接口的一个帮助器,它返回一个promise。然后你可以做类似的事情:

var Account = React.createClass({
  getInitialState: function() {
    return {
      username: ''
    };
  },

  componentWillMount: function() {
    APIHelper.get('/').then(function(response) {
      this.setState({
        username: response.username
      });
    });
  },

  render: function(){
    return (
      <div>
        {this.state.username}
      </div>
    )
  }
});