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。没有工作。

我在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;

这是使用semantic-ui进行服务器端渲染的常见问题，还是我做错了？

Answer 1

试试这个：

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

我认为调用require('semantic-ui-dropdown')需要在DOM中初始化现有window

并从文件顶部删除实际的require('semantic-ui-dropdown')

使用React.js进行服务器端渲染

1 个答案: