कैसे React.js का उपयोग करने पर Sails.js सर्वर साइड टेम्पलेट रेंडर करने के लिए?

Question

मैं Sails.js के साथ एक isomorphing एप्लिकेशन का निर्माण और प्रतिक्रिया करने के लिए कोशिश कर रहा हूँ। ग्राहक-पक्ष भाग आसान है। लेकिन मैं सर्वर-साइड प्रतिपादन के साथ समस्याओं में भाग लेता हूं।

मैं करने का प्रयास करते के साथ एक * .jsx फ़ाइल सर्वर-प्रदान प्रतिक्रिया है, मैं यह मिल गया:

renderToString(): You must pass a valid ReactElement 

मैं sailsjs उपयोग कर रहा हूँ, प्रतिक्रिया और पाल-हुक-कोलाहल (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 ठीक काम करता है (मैं बेबेल-लोडर के साथ वेबपैक का उपयोग कर रहा हूं)।

Answer 1

आपकी समस्या अपने घटक के साथ ही नहीं है, यह कैसे आप इसे अपने मॉड्यूल से निर्यात कर रहे हैं।

का उपयोग करते समय बस export आप इस तरह अपने मॉड्यूल आयात करने के लिए की जरूरत है।

import {Auth} from 'auth'; 

बस export का उपयोग कर अपने मॉड्यूल से 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 default का उपयोग है।

export default class Auth extends React.Component {} 

इस प्रकार आप घुंघराले ब्रेसिज़ के बिना एक वस्तु के रूप में अपने मॉड्यूल आयात दे।

import Auth from 'auth'; 

तो फिर तुम का उपयोग कर प्रस्तुत करना या तो JSX वाक्य रचना React.renderToString(<Auth />); या React.createElement(Auth);

का उपयोग आप कैसे ECMA स्क्रिप्ट 6 में मॉड्यूल मुझ पर काम करता है here