个人中心
gpt4 book ai didi

javascript - ReactDOMServer.renderToStaticMarkup 完整标记

转载 作者：行者123 更新时间：2023-11-29 21:34:14 25 4
gpt4 key购买 nike

我正在使用 ReactDOMServer通过服务器端生成一个静态站点，它似乎不喜欢这个组件，特别是开头 <!DOCTYPE html>标签。 (见下文)

我这样做是因为我正在尝试使用 React 通过服务器端完全呈现页面以实现 IE8 兼容性并最终成为一个同构应用程序。

是否有关于如何通过服务器端使用 React 完全呈现静态标记的最佳实践(包括开始的 html 标签等)？

'use strict';

import React from 'react';

export default class Root extends React.Component {

  render() {
    return (
      <!DOCTYPE html>
      <head>
      <title>Hello World!</title>
      </head>
      <body>

      <h1>Hello World!</h1>

      </body>
      </html>
    );
  }

}

let html = ReactDOMServer.renderToStaticMarkup(<Root />);

奖励:虽然一个简单的 DOCTYPE 破坏了它，但最终我想在顶部添加额外的 IE 标签，如下所示。

<!--[if lt IE 7]>  <html dir="ltr" lang="en-US" class="no-js ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]>     <html dir="ltr" lang="en-US" class="no-js ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]>     <html dir="ltr" lang="en-US" class="no-js ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]>     <html dir="ltr" lang="en-US" class="no-js ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]>  <html dir="ltr" lang="en-US" class="no-js"> <![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->

最佳答案

您可能希望发出 DOCTYPE在 React 组件外部 header 并替换 <!DOCTYPE html>用<html>节点。 JSX 不是 HTML，只是将您的元素映射到相应的 React.createElement() 调用，这对于 DOCTYPE 没有意义。 .

看看这些以供引用:

res.send('<!doctype html>\n' + ReactDOM.renderToString(<Html />));

render() {
return (
<html lang="en-us">
<head></head>
...
</html>)
}

关于javascript - ReactDOMServer.renderToStaticMarkup 完整标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35298460/

25 4 0
文章推荐： php - 如何从相同的多个数据库结果中选择一个结果
文章推荐： android - 在 AchartEngine 中重绘
文章推荐： android - 菜单未添加到 Sherlock 操作栏中的溢出菜单中
文章推荐： javascript - 从 OpenLayers3 中的图层组获取图层名称属性
行者123
个人简介

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

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