1

我目前正在做一个新项目，所以我决定实现 React，但使用服务器端渲染。我使用express作为页面之间的路由器，所以当你访问主页时，入口点是这样的：

const router = require('express').Router();
const { render, fetchUsers } = require('./controller');

router.use('/', fetchUsers, render);

module.exports = router;

因此，当您访问主页时，这将获取所有用户，然后它将呈现组件，为了呈现组件，我执行以下操作：

const render = (req, res) => {
    const extraProps = {
        users: res.locals.users.data,
    }
    return renderView(View, extraProps)(req, res);
}

fetchUsers 方法使用 api 响应设置res.locals.users 。我的 renderView 做这样的事情：

const renderView = (Component, props = {}) => (req, res) => {
const content = renderToString(
    <LayoutWrapper state={props}>
        <Component {...props} />
    </LayoutWrapper>

);
res.send(content);

};

我的 LayoutWrapper 是一个替换 html 模板的 React 组件：

const React = require('React');
const serialize = require('serialize-javascript');

const LayoutWrapper = ({ children, state }) => (
    <html>
        <head></head>
        <body>
            <div id={'app-root'}>
                {children}
            </div>
        </body>
        <script>
            {`window.INITIAL_STATE = ${serialize(state, { isJSON: true })}`}
        </script>
        <script src={`home.js`} />
    </html>
)


module.exports = LayoutWrapper;

设置 window.INITAL_STATE = props; 的脚本 用于客户端获取获取的道具。但问题在于renderToString处理组件的方式。console.log 输出如下：

<html data-reactroot="">

<head></head>

<body>
  <div id="app-root">
    <div>I&#x27;m the Home component</div><button>Press me!</button>
    <ul>
      <li>Leanne Graham</li>
      <li>Ervin Howell</li>
      <li>Clementine Bauch</li>
      <li>Patricia Lebsack</li>
      <li>Chelsey Dietrich</li>
    </ul>
  </div>
</body>
<script>
  window.INITIAL_STATE = { & quot;users & quot;: [{ & quot;id & quot;: 1,
      & quot;name & quot;: & quot;Leanne Graham & quot;
    }, { & quot;id & quot;: 2,
      & quot;name & quot;: & quot;Ervin Howell & quot;
    }, { & quot;id & quot;: 3,
      & quot;name & quot;: & quot;Clementine Bauch & quot;
    }, { & quot;id & quot;: 4,
      & quot;name & quot;: & quot;Patricia
      Lebsack & quot;
    }, { & quot;id & quot;: 5,
      & quot;name & quot;: & quot;Chelsey Dietrich & quot;
    }]
  }
</script>
<script src="home.js"></script>

</html>

有没有办法做到这一点，而不必将 html 模板声明为简单的字符串，而是有一个设置 html 代码结构的 Wrapper 组件？

4

1 回答 1

0

您可以替换所有转义符号，但只能在renderToString调用之后。

renderToString(...).replace('& quot;', '')

安全说明。

于 2020-08-22T16:32:39.407 回答