Question

我目前正在开发一个新项目，所以我决定实现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组件？

Answer 1

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

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

Security notes.

反应服务器端渲染+ renderToString

1 个答案: