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

Question

在我的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) });
  })
});

但是我在将这些数据提供给我的react组件时遇到了问题，理想情况下，我希望能够这样做

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或类似的东西来更新我的组件的状态--这可能吗？

谢谢

Answer 1

我通过让我的React组件在挂载后向我的服务器发送请求来实现这一点，当收到请求时，我的express应用程序将发送回相关数据