如何使用React.js在Sails.js上呈现服务器端模板？

Question

我正在尝试使用Sails.js和React构建一个同构应用程序.客户端部分很简单.但是我遇到了服务器端渲染的问题.

当我尝试使用React服务器渲染*.jsx文件时,我得到了这个:

renderToString(): You must pass a valid ReactElement

我正在使用sailsjs,react和sails-hook-babel(用于ES6语法).

./assets/components/Auth.jsx:

import React from 'react';

export class Auth extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className='auth'>
        Very simple element without any logic just for test server-rendering.
      </div>
    );
  }
}

./api/controllers/AuthController.js:

var Auth = require('./../../assets/components/Auth.jsx');
import React from 'react';

module.exports = {
    render: function (req, res) {
    //var markup = React.renderToString(
    //  Auth
    //); // This throws an error

    console.log(Auth); // {__esModule: true, Auth: [Function: Auth]}

    //res.view("layout", {app: markup});
  }
};

我到处都试过ES5/ES6语法.每次都会出错.在客户端,这个Auth.jsx工作正常(我正在使用带有babel-loader的webpack).

Answer 1

您的问题不在于您的组件本身,而是您从模块中导出它的方式.

使用时,export您需要像这样导入模块.

import {Auth} from 'auth';

只是使用export允许从您的模块导出多个东西.

// My Module.
export function a(x) {
    console.log('a');
}

export function b(x, y) {
    console.log('b');
}

import { a, b } from 'myModule';

或者您可以使用import * from 'myModule'; 这称为命名导出.

您的用例需要使用的export default是允许从您的模块导出单个对象.

export default class Auth extends React.Component {}

因此,您可以将模块作为单个对象导入而无需花括号.

import Auth from 'auth';

然后你需要使用JSX语法React.renderToString(<Auth />);或 React.createElement(Auth);

你可以阅读所有关于ECMA脚本6个模块的工作原理在这里