typescript renderToPipeableStream管道未引发事件

rryofs0p  于 2023-01-14  发布在  TypeScript
关注(0)|答案(2)|浏览(129)

我尝试使用React18中的renderToPipeableStream函数。它可以工作,但我不能很好地处理管道。
这是我代码的重要部分,我猜. html是html的一个字符串数组,我把字符串从中间分开,我想把react代码放在那里。

server.get("/", (req: any, res: any) => {  
    res.write(html[0] + '<div id="root">')
    const stream = ReactDomServer.renderToPipeableStream(
       <App />
    ).pipe(res, { end: false })
    stream.on("end", () => {
        res.write('</dev>' + html[1])
        res.end()
    })
})

问题是stream.on("end"不火。但我想这是因为没有是html代码不完整。浏览器忽略,但这是不好的,所以。

xt0899hw

xt0899hw1#

这对我很有效:

const stream = renderToPipeableStream(jsx, {
    onAllReady() {
      res.end(`</div></body></html>`);
    },
  });

  stream.pipe(res, { end: false });
  res.flush();

https://reactjs.org/docs/react-dom-server.html#rendertopipeablestream

vmjh9lq9

vmjh9lq92#

我可以使用以下代码解决此问题

const app = renderToPipeableStream(<App />);

  res.type('html');

  res.write(getDocumentHead(req, res)); //Custom function to construct header html

  app.pipe(res, {end: false});

  res.write(getDocumentEnd(req, res)); //Custom function to construct scripts

  res.end();

相关问题