在服务器上呈现或更新react元素

时间:2016-03-23 23:20:29

标签: javascript node.js express reactjs

在我的React应用程序中,我的所有组件都可以通过浏览器自行更新,但是我使用名为jenkins-api的模块仅在我称之为服务器端时才有效。我可以获取数据并将其传递到我的模板中,如下所示:

require("babel-core/register")({presets: ['es2015', 'react']});
var express = require('express');
var router = express.Router();
var React = require('react');
var ReactDOM = require('react-dom');
var Component = require('../src/javascripts/components/Areachart');
var jenkinsapi = require('jenkins-api');
var jenkins = jenkinsapi.init('https://username:password@my.jenkins.server:8080', {strictSSL: false});

router.get('/', function(req, res, next) {
  jenkins.all_jobs(function(err,jenkins-res){
    if (err) {
      console.log(err)
    }
    res.render('index', { title: 'My App', data: JSON.stringify(jenkins-res) });
  })
});

但是我无法将此数据提供给我的反应组件,理想情况下我希望能够做到这样的事情

router.get('/', function(req, res, next) {
  jenkins.all_jobs(function(err,jenkins-res){
    if (err) {
      console.log(err)
    }
    res.render('index', { title: 'My App', data: Component.setState({prop1: jenkins-res.prop1, prop2: jenkins-res.prop2 });

我甚至尝试渲染整个React组件:

res.render('index', { title: 'My App', data: ReactDOM.render(React.createElement(Component), document.getElementById('main'))});

但这不起作用,因为document不存在。我希望使用.setState或类似的东西在服务器检索到数据时更新组件的状态 - 这可能吗?

由于

1 个答案:

答案 0 :(得分:0)

我通过让我的React组件在我们的服务器安装后向我的服务器发送请求来完成这项工作,当收到请求时,我的快递应用程序将发回相关数据