Node.js 节点/Express服务器上的ReactDOMServer renderToStaticMarkup

我正在尝试创建一个服务器渲染的react应用程序，唯一让我困扰的部分是将我的组件导入到我的express服务器，并获取要发送回用户的静态标记。基本上我现在拥有的是：

快速服务器：

const Report = require('../public/source/components/index.js').default;
....
router.get('/*', function(req, res, next) {
    var reportHTML = ReactDOMServer.renderToStaticMarkup(react.createElement(Report)))
    res.render('index', { title: 'Report' });
});

当我点击该路线时，我得到以下错误：

Warning: React.createElement: type is invalid -- expected a string
(for built-in components) or a class/function (for composite components)
but got: object. You likely forgot to export your component from the file
it's defined in. Check the render method of `ReportApp`.
in ReportApp

关于index.js文件的内容，请注意，我去掉了很多涉及graphql和设置初始状态的复杂性，这就是为什么它不是一个功能组件的原因

import React, { Component } from 'react';
import Header from './header/Header';
import PageOneLayout from './pageOneLayout/PageOneLayout';
import styles from './main.scss';

const hexBackground = require('./assets/hex_background.png');

export default class ReportApp extends Component {
  render() {
    return (
      <div className={styles.contentArea}>
        <img src={`/build/${hexBackground}`} alt={'hexagonal background'} className={styles.hexBackground}/>
        <Header client={"client name"} />
        <div className={styles.horizontalLine}></div>
        <PageOneLayout chartData={this.state} />
      </div>
    )
  }
}

---

有几件事需要考虑：

• 您是否在服务器端进行代码传输
• 您是如何构建组件包的（显示配置，我假设是Web包）
• 确保捆绑组件公开该组件
• 在这种情况下，不需要额外的

  createElement

  ，

  ReactDOMServer.renderToStaticMarkup（react.createElement（Report））

  ---

我在服务器上使用的是

babel register

，否则我只是导入我的主组件并在其上调用这些方法。我还用我的网页包configTry更新了我的原始帖子尝试删除

createElement

ReactDOMServer.renderToStaticMarkup（Report）），该更改产生了以下错误：

renderToStaticMarkup（）：您必须传递一个有效的ReactElement。

我看到其他人在他们的服务器代码中使用jsx，不确定他们是如何做到的，但也许这会引导我们朝着正确的方向前进？当您使用babel register时，代码应该在运行中传输，如果您尝试服务器端的ReactDOMServer.renderToStaticMarkup（Test）；？

/* eslint-disable no-console */
/* eslint-disable import/no-extraneous-dependencies */
import autoprefixer from 'autoprefixer';
import nodemon from 'nodemon';
import ExtractTextPlugin from 'extract-text-webpack-plugin';

nodemon({
    script: './bin/www',
    ext: 'js json',
    ignore: ['public/'],
});

nodemon.on('start', () => {
    console.log('App has started');
}).on('quit', () => {
    console.log('App has quit');
}).on('restart', files => console.log('App restarted due to: ', files));

export default {
    watch: true,
    entry: './public/source/main.js',
    output: { path: `${__dirname}/public/build/`, filename: 'main.js' },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                     presets: ['react', 'es2015', 'stage-1'],
                     plugins: ['transform-decorators-legacy'],
                     cacheDirectory: true
                 }
            },
            // {
            //     test: /\.jsx?$/,
            //     exclude: /node_modules/,
            //     loader: 'eslint',
            // },
            {
                test: /\.s?css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass-loader?outputStyle=expanded&sourceMap')
            },
            { test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/, loader: "file", output: {path: `${__dirname}/public/build/`, filename: 'logo.svg'}},
        ],
    },
    // eslint: {
    //     configFile: './public/.eslintrc',
    // },
    resolve: {
        modulesDirectories: ['node_modules', 'public/source'],
        extensions: ['', '.js', '.jsx'],
    },
    postcss: [
        autoprefixer,
    ],
    plugins: [
        new ExtractTextPlugin('main.css', { allChunks: true }),
    ],
};