使用 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

我已经用 npm 安装了 jquery。最后还尝试安装jsdom版本jsdom@3.1.2。没有任何效果。

我在semantic-ui 网页中使用Recipes-Server-side rendering。

我用于服务器端组件的代码如下：

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')