使用React.js進行服務器端渲染

Question

我無法通過Reactjs服務器端呈現我的語義。 它在沒有語義的情況下工作，因此我的反應服務器端代碼沒有問題。 服務器崩潰並給出錯誤的開始行：

/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

我的jQuery安裝了npm。 最后還嘗試安裝jsdom版本jsdom@3.1.2。 沒有工作。

我在語義UI網頁中使用Recipes-Server端渲染 。

我用於服務器端組件的代碼如下：

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;

這是使用語義UI進行服務器端渲染的普遍已知問題，還是我做錯了？

Answer 1

嘗試這個：

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

我認為調用require('semantic-ui-dropdown')需要在DOM中初始化一個現有window

並從文件頂部刪除實際的require('semantic-ui-dropdown')