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

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

当我尝试使用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工作正常（我使用webpack与babel-loader）。

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';使用import * from 'myModule'; 这被称为命名导出 。

您的使用案例要求的是使用export default ，它允许从您的模块导出单个对象。

 export default class Auth extends React.Component {} 

因此让你导入你的模块作为一个单一的对象没有大括号。

 import Auth from 'auth'; 

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

您可以阅读所有有关ECMA Script 6中的模块如何工作的信息