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

IT技术 javascript node.js reactjs sails.js
2021-05-04 12:59:35

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

1个回答

您的问题不在于您的组件本身，而在于您如何从module中导出它。

仅使用时，export您需要像这样导入module。

import {Auth} from 'auth';

仅使用export允许从您的module中导出 1 个以上的内容。

// 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 defaultwhich 允许从您的module导出单个对象。

export default class Auth extends React.Component {}

因此，您可以将module作为单个对象导入而无需花括号。

import Auth from 'auth';

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

您可以在此处阅读有关 ECMA Script 6 中module如何工作的所有信息

其它你可能感兴趣的问题
上一篇线宽随打印头移动方向而变化 下一篇如何上传固件到rerap打印机？