Question

相关的库是react-modal，但这可能会发生在许多其他库中。我该如何处理？
server.js

import express from 'express';
import React from 'react';
import { match, RoutingContext } from 'react-router';
import routes from './routes';

var app = express();
app.get('/*', function (req, res) {
   console.log(req.url);
   match({routes, location: req.url}, (error, redirectLocation, renderProps) => {
       console.log('renderProps is '+renderProps);
       if (error) {
           console.log('error');
           res.send(500, error.message)
       } else if (redirectLocation) {
           console.log('redirect');
           res.redirect(302, redirectLocation.pathname + redirectLocation.search)
       } else if (renderProps) {
           console.log('ok - ');
           let htmlStr = React.renderToString(<RoutingContext {...renderProps} />)
           console.log('html string response '+htmlStr);
           res.render('layout', { reactHtml: htmlStr });
       } else {
           console.log('not found')
           res.send(404, 'Not found')
       }
   })
});

app.listen(process.env.PORT || 3000);

routes.js

import React from 'react';

var routes = [];
routes.push({path: '/articles/:id', component: GenericPage, params: {pageType: 'article'}});
routes.push({path: '/:id', component: GenericPage, params: {pageType: 'generic'}});
// routes.push({path: '*', component: NotFound});

var routeConfig = [
    {
        path: '/',
        component: AfApp,
        indexRoute: {component: Homepage},
        childRoutes: routes
    }
];

export default routeConfig;

我正在使用react 0.13.3，react-router 1.0.0

/Users/eric/af/frontend_app/node_modules/react-modal/lib/helpers/ariaAppHider.js:1
 (exports, require, module, __filename, __dirname) { var _element = document.b
                                                                    ^
    ReferenceError: document is not defined
        at Object.<anonymous> (/Users/eric/af/frontend_app/node_modules/react-modal/lib/helpers/ariaAppHider.js:1:78)
        at Module._compile (module.js:460:26)
        at Module._extensions..js (module.js:478:10)
        at Object.require.extensions.(anonymous function) [as .js] (/Users/eric/af/frontend_app/node_modules/babel-core/lib/api/register/node.js:214:7)
        at Module.load (module.js:355:32)
        at Function.Module._load (module.js:310:12)
        at Module.require (module.js:365:17)
        at require (module.js:384:17)
        at Object.<anonymous> (/Users/eric/af/frontend_app/node_modules/react-modal/lib/components/Modal.js:4:20)
        at Module._compile (module.js:460:26)

Answer 1

我得出的结论是，我需要使用更改库并且与Node JS友好并且与React 0.13.x兼容，不幸的是没有魔法。

或者，可以将任何函数调用包装到服务器不友好的Javascript库中，并检查它是否是浏览器环境：
if (typeof window !== 'undefined') { // it's safe to call server-unfriendly libraries here }

React服务器端呈现ReferenceError：未定义文档

1 个答案: