如何使用React.js在Sails.js上渲染服务器端模板

How to use React.js to render server-side template on Sails.js?

本文关键字：js 服务器端 Sails 何使用 React      更新时间：2023-09-26

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

当我尝试服务器渲染一个*。jsx文件与React，我得到这个:

renderToString(): You must pass a valid ReactElement

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

。/资产/组件/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/控制器/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语法无处不在。每次都发生错误。今年八月在客户端。jsx工作良好(我使用webpack与babel-loader)。

你的问题不是你的组件本身，而是你如何从你的模块导出它。

如果只使用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的。

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

export default class Auth extends React.Component {}

这样就可以将模块作为一个单独的对象导入，而不需要花括号。

import Auth from 'auth';

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

你可以在这里阅读所有关于ECMA Script 6中的模块是如何工作的

相关文章：