如何在reactjs中呈现完整的html

用户名

我有一个HTML文件,其中的meta标签,标题,正文,表单来自服务器,是来自字符串的。现在,我的疑问是如何在reactjs中打开完整的html,因为reactjs中已经有一个主index.html。当我尝试使用时,dangerouslySetInnerHTML它给出了一个空白页。

年tzkhori

正如我在评论中提到的,您可以通过多种方式来实现。尽管我讨厌iframe,但它可能是适合您的解决方案。

注意:该解决方案与React无关

import React from "react";

const html = `<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>div{
    background: red;
    color: white;
  }</style>
</head>
<body>
<div>Hello iframe</div>
</body>
</html>`

export default function App() {
  return (
    <div className="App">
     <iframe srcDoc={html} title="my-iframe"></iframe>
    </div>
  );
}

看现场例子:这里

请在此处阅读有关MDN中的iframe的更多配置

更多阅读填充工具给srcDoc这里

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在reactjs中创建完整的html like table?

来自分类Dev

如何在ReactJS中呈现HTML模板并绑定来自JSON响应的数据?

来自分类Dev

如何在ReactJS中呈现HTML模板并绑定来自JSON响应的数据?

来自分类Dev

如何在基座中呈现HTML模板?

来自分类Dev

如何在JavaScript中呈现HTML文件?

来自分类Dev

如何在Laravel Blade中呈现HTML

来自分类Dev

如何在WebSVN中呈现HTML文件?

来自分类Dev

如何在Angularjs指令中呈现html?

来自分类Dev

如何在WebSVN中呈现HTML文件?

来自分类Dev

如何在 svelte 中呈现 html

来自分类Dev

如何在ReactJs中的select Option上呈现onChange的Table

来自分类Dev

如何在 Reactjs 中渲染 html 元素?

来自分类Dev

如何在HTML Word中呈现模型属性?

来自分类Dev

如何在ng-grid中呈现html格式的内容?

来自分类Dev

如何在浏览器中呈现CSS / HTML?

来自分类Dev

如何在nativescript应用程序中呈现html网站?

来自分类Dev

PhantomJS如何在HTML字符串中呈现JavaScript

来自分类Dev

如何在JSF 2.2中呈现HTML按钮元素?

来自分类Dev

如何在Angular 6中呈现转义的html

来自分类Dev

如何在脚本标签Vue JS中呈现HTML

来自分类Dev

如何在React中呈现条件HTML元素

来自分类Dev

如何在浏览器中呈现CSS / HTML?

来自分类Dev

HTML换行符如何在PHP中呈现?

来自分类Dev

如何在SLIM中呈现HTML编码的文本

来自分类Dev

如何在nativescript应用程序中呈现html网站?

来自分类Dev

如何在Orchard中更改默认的html标签呈现?

来自分类Dev

如何在闪亮的应用程序中呈现HTML图

来自分类Dev

AngularJS:如何在视图中呈现 $scope 变量中的 HTML?

来自分类Dev

如何在 Django 的 html 中呈现多对多标签

Related 相关文章

热门标签

归档