个人中心
gpt4 book ai didi

javascript - ReactDOM.renderToString sessionStorage 未定义，window 未定义

转载 作者：行者123 更新时间：2023-11-28 05:13:36 28 4
gpt4 key购买 nike

我有一个应用程序，其中 webpack 配置为模块 bundler ，babel 作为我的 js 编译器。全部都在 Node 引擎上。我设置当我运行 npm run dev 时，将会发生以下流程:

webpack-dev-server.js 将运行。该文件如下:

const Express = require('express');
const webpack = require('webpack');
const webpackConfig = require('./dev.config');
const compiler = webpack(webpackConfig);

const host = 'localhost';
const port = 8080;
const serverOptions = {
  contentBase: `http://${host}:${port}`,
  quiet: true,
  noInfo: true,
  hot: true,
  inline: true,
  lazy: false,
  publicPath: webpackConfig.output.publicPath,
  headers: { 'Access-Control-Allow-Origin': '*' },
  stats: { colors: true },
};

const app = new Express();

app.use(require('webpack-dev-middleware')(compiler, serverOptions));
app.use(require('webpack-hot-middleware')(compiler));

app.listen(port, function onAppListening(err) {
  if (err) {
    console.error(err);
  } else {
    console.info('==> Webpack development server listening on port %s', port);
  }
});

然后是server.js

require('./../server.babel');
const path = require('path');
const WebpackIsomorphicTools = require('webpack-isomorphic-tools');
const rootDir = path.resolve(require('../server/config').rootDir);

global.__CLIENT__ = false;
global.__SERVER__ = true;
global.__DEVELOPMENT__ = process.env.NODE_ENV !== 'production';

if (__DEVELOPMENT__) {
  if (!require('piping')({
    hook: true,
    ignore: /(\/\.|~$|\.json|\.scss$)/i
  })) {
    return;
  }
}

global.webpackIsomorphicTools = new WebpackIsomorphicTools(require('../webpack/webpack-isomorphic-tools'))
  .development(__DEVELOPMENT__)
  .server(rootDir, () => {
    require('../server/server');
  });

express 和 React 渲染:

import 'babel-polyfill';
// Server
import express from 'express';
import session from 'express-session';
import cookieParser from 'cookie-parser';
// React
import React from 'react';
import ReactDOM from 'react-dom/server';
import createHistory from 'react-router/lib/createMemoryHistory';
import { match } from 'react-router';
// Redux
import { Provider } from 'react-redux';
import { ReduxAsyncConnect, loadOnServer } from 'redux-connect';
import { syncHistoryWithStore } from 'react-router-redux';
import path from 'path';
import csurf from 'csurf';
import bodyParser from 'body-parser';
// Relative imports
import Html from '../shared/html';
import proxy from './proxy';
import createStore from '../shared/redux/create';
import { staticPath } from './config';
import { getRoutes } from '../shared/routes';

require('dotenv').config({
  path: path.resolve(__dirname, '../.env'),
});

const SERVER_PORT = process.env.SERVER_PORT;
const APP_SECRET = process.env.APP_SECRET;
const API_PORT = process.env.API_PORT;
const API_HOST = process.env.API_HOST;

function renderPage({ renderProps, store, res, client, csrfToken }) {
  loadOnServer({ ...renderProps, store, helpers: { client } })
    .then(() => {
      const component = (
        <Provider store={store} key="provider">
          <ReduxAsyncConnect {...renderProps} />
        </Provider>
      );
      res.status(200);
      res.send('<!doctype html>\n' +
        ReactDOM.renderToString(
          <Html
            assets={webpackIsomorphicTools.assets()}
            component={component}
            csrfToken={csrfToken}
            store={store}
          />,
        ),
      );
    })
    .catch((err) => {
      console.error(err.stack);
    });
}


const app = express();
const csrf = csurf();

// express middlewares
// app.use(favicon(path.resolve(__dirname, '../static/favicon.ico'))); @TODO favicon @ilanus
app.use(bodyParser.json());
app.use(express.static(staticPath));
app.use(cookieParser(APP_SECRET));
app.use(session({
  secret: APP_SECRET,
  saveUninitialized: true,
  resave: true,
}));
app.use(csrf);
app.use('/api', (req, res) => {
  if (!req.xhr) res.redirect('/');
  proxy.web(req, res, { target: `http://${API_HOST}:${API_PORT}` });
});
app.use((req, res) => {
  const csrfToken = req.csrfToken();
  if (__DEVELOPMENT__) {
    // Do not cache webpack stats: the script file would change since
    // hot module replacement is enabled in the development env
    webpackIsomorphicTools.refresh();
  }
  const memoryHistory = createHistory(req.originalUrl);
  const store = createStore({}, memoryHistory);
  const history = syncHistoryWithStore(memoryHistory, store);
  match({ history, routes: getRoutes(store), location: req.originalUrl },
    (error, redirectLocation, renderProps) => {
      if (redirectLocation) {
        res.redirect(redirectLocation.pathname + redirectLocation.search);
      } else if (error) {
        console.error('ROUTER ERROR:', error);
        res.status(500);
      } else if (renderProps) {
        renderPage({ renderProps, store, res, csrfToken });
      } else {
        res.status(404).send('Not found');
      }
    });
});

app.use((err, req, res) => {
  if (err === 'EBADCSRFTOKEN') {
    res.status(403);
    res.send('invalid csrf token');
  } else {
    res.status(500);
    res.send('Oops, internal server error');
  }
});

app.listen(SERVER_PORT, (error) => {
  if (error) {
    console.error(error);
  } else {
    console.info(`App started listening on port ${SERVER_PORT}`);
  }
});

现在，每当我尝试在 render() 函数或 componentDidMount 中使用 console.log('window', window, 'sessionStorage', sessionStorage); React 组件的 () 我最终得到: sessionStorage is not Defined, window is not Defined 错误。我想那是因为我在服务器端运行堆栈，而这些堆栈在那里不可用，我错过了什么？

最佳答案

您只需要一个函数，而不是直接访问窗口和窗口属性，例如

function globalObj(){
    const isNode = typeof process === 'object' && process.versions && !!process.versions.node;

    return isNode ? global : window;
 }

您可以从那里以通用方式访问 sessionStorage 等，不会出现错误

globalObj()["sessionStorage"]

我希望这会有所帮助。

关于javascript - ReactDOM.renderToString sessionStorage 未定义，window 未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41168615/

28 4 0
文章推荐： javascript - Express 后端的 Angular Routing templateUrl 无法正常工作
文章推荐： javascript - [交响乐+ Twig ]
文章推荐： javascript - jQuery 发送空数据
文章推荐： javascript - Three.js - 反转相机旋转矩阵
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com