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

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

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

如何在快速路由器中显示传递给视图的数据？

1 个答案: