Server-Side-Rendering mit React.js

Question

Ich kann nicht meine Semantik mit Reactjs Server-Seite rendern. Es funktioniert ohne Semantik, also kein Problem mit meinem Seitencode. Server abstürzt und gibt die Anfangszeilen Fehler:

/Users/isik/Dev/portfolio/reactjs-server-side-rendering/node_modules/semantic-ui-dropdown/index.js:3443 
})(require("jquery"), window, document); 
        ^

ReferenceError: window is not defined 

Ich habe Jquery mit npm insatlled. Und zuletzt auch versucht, jsdom Version jsdom@3.1.2 zu installieren. Keine funktioniert.

Ich benutze Recipes-Server-side rendering in semantic-ui Webseite.

der Code, den ich für meine serverseitige Komponente verwenden, ist wie folgt:

var React = require('react'); 
var jquery = require('jquery'); 
var dropdown = require('semantic-ui-dropdown'); 

// Can use JSX too 
var Component = React.createClass({ 
    componentDidMount: function() { 
     $('.ui.dropdown').dropdown(); 
    }, 
    componentDidUpdate: function() { 
     $('.ui.dropdown').dropdown('refresh'); 
    }, 
    render: function(){ 
     return(
       <div className="ui selection dropdown"> 
        <input type="hidden" name="gender"/> 
        <i className="dropdown icon"></i> 
        <div className="default text">Gender</div> 
        <div className="menu"> 
         <div className="item" data-value="1">Male</div> 
         <div className="item" data-value="0">Female</div> 
        </div> 
       </div> 
     ); 
    } 
}); 

module.exports.Component = Component; 

Ist das ein allgemein bekanntes Problem mit der Server-Seite mit semantischen-ui-Rendering oder ich es falsch mache?

Answer 1

Try this:

componentDidMount: function() { 
    var dropdown = require('semantic-ui-dropdown'); 
    $('.ui.dropdown').dropdown(); 
}, 

Ich denke, dass require('semantic-ui-dropdown') Aufruf eines vorhandenen window im DOM

und entfernen Sie die tatsächliche require('semantic-ui-dropdown') vom Anfang der Datei