Server side rendering React服务器端渲染+；渲染字符串_Server Side Rendering_React Dom Server_Render To String

Server side rendering React服务器端渲染+；渲染字符串

Server side rendering React服务器端渲染+；渲染字符串,server-side-rendering,react-dom-server,render-to-string,Server Side Rendering,React Dom Server,Render To String,我目前正在从事一个新项目，因此我决定使用服务器端渲染实现React。我使用express作为页面之间的路由器，因此当您访问主页时，入口点如下所示： const router = require('express').Router(); const { render, fetchUsers } = require('./controller'); router.use('/', fetchUsers, render); module.exports = router; const rend

我目前正在从事一个新项目，因此我决定使用服务器端渲染实现React。我使用express作为页面之间的路由器，因此当您访问主页时，入口点如下所示：

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

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

module.exports = router;

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

);
res.send(content);

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

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

<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>

fetchUsers方法使用api响应设置res.locals.users。我的renderView执行以下操作：

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

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

module.exports = router;

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

);
res.send(content);

const renderView=（组件，道具={}）=>（请求，恢复）=>{
const content=renderToString(
);
res.send（内容）；

})

My 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;

const React=require（'React'）；
const serialize=require（'serialize-javascript'）；
const LayoutWrapper=（{children，state}）=>(
{儿童}
{`window.INITIAL_STATE=${serialize（STATE，{isJSON:true}）}`}
)
module.exports=布局包装器；

设置window.INITAL_STATE=props的脚本；在客户端使用，以获取获取的道具。但问题是渲染字符串处理组件的方式。 console.log输出如下所示：

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

<html data-reactroot=""> <head></head> <body> <div id="app-root"> <div>I'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>

I'；我是家里的人，按我！莱恩·格雷厄姆欧文豪厄尔克莱门汀·鲍奇帕特里夏·勒布萨克切尔西迪特里希 window.INITIAL_STATE={quot；users"；：[{quot；id"；：1， &“姓名”：“莱恩·格雷厄姆”； }，{quot；id:2， &“姓名”：“埃尔文·豪厄尔”； }，{quot；id:3， &“姓名”：“克莱门廷·鲍奇”； }，{quot；id:4， &“姓名”：“帕特里夏” “Lebsack”； }，{quot；id:5， &“姓名”：“Chelsey Dietrich”； }] }

有没有办法做到这一点，而不必将html模板声明为简单字符串，而是使用一个包装器组件来设置html代码结构？
您可以替换所有转义符号，但只能在调用
renderToString
之后

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

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

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