如何在react中渲染原始的html文档

Posted 2023-04-05

参考技术A 很多时候我们需要在react中渲染原始的html文档，但是原始html文档本身和react结构存在差异，直接插入会被解析成字符串；

所以可以用react的属性dangerouslySetInnerHTML来动态渲染html文档，格式如下：

还可以直接这样渲染：

<div dangerouslySetInnerHTML=__html: "<strong>Welcome to React</strong>" />

在 React Native 中渲染 HTML

【中文标题】在 React Native 中渲染 HTML

【英文标题】：Render HTML in React Native

【发布时间】：2015-06-02 19:20:26

【问题描述】：

在我的 React Native 应用程序中，我正在提取具有如下原始 HTML 元素的 JSON 数据：<p>This is some text. Let’s figure out...</p>

我已将数据添加到我的应用中的视图中，如下所示：

<Text>this.props.content</Text>

问题是 HTML 是原始的，它不像在浏览器中那样呈现。有没有办法让我的 JSON 数据在我的应用视图中看起来像在浏览器中一样？

【问题讨论】：

在 React 中，有 dangerouslySetInnerHTML 属性 (facebook.github.io/react/docs/jsx-gotchas.html) 来显示 HTML。我现在无法测试它，但它也可以与 Native 一起使用。

其实我试过了：<Text dangerouslySetInnerHTML=__html: this.props.content ></Text> 没有用，除非我做错了什么。

检查这个：gist.github.com/jsdf/7f983f2cd955fd75d6cc

github.com/react-native-community/react-native-webview 似乎是实现这一目标的最新组件。

【参考方案1】：

2021 年 1 月编辑：React Native 文档目前推荐 React Native WebView：

<WebView
    originWhitelist=['*']
    source= html: '<p>Here I am</p>' 
/>

https://github.com/react-native-webview/react-native-webview

如果您不想嵌入 WebView，也有第三方库可以将 HTML 渲染到原生视图中：

react-native-render-html react-native-htmlview

---

2017 年 3 月编辑：html 属性已被弃用。请改用source：

<WebView source=html: '<p>Here I am</p>' />

https://facebook.github.io/react-native/docs/webview.html#html

感谢Justin 指出这一点。

---

2017 年 2 月编辑：PR 不久前被接受，因此要在 React Native 中呈现 HTML，只需：

<WebView html='<p>Here I am</p>' />

---

原答案：

我认为目前这是不可能的。您看到的行为是预期的，因为 Text 组件只输出......好吧，文本。您需要另一个输出 HTML 的组件 - 这就是 WebView。

不幸的是，现在没有办法直接在这个组件上设置 HTML：

https://github.com/facebook/react-native/issues/506

不过，我刚刚创建了 this PR，它实现了此功能的基本版本，因此希望它很快会以某种形式出现。

【讨论】：

很棒的科林，谢谢你这样做！我会关注github问题。

根据版本 0.42 (facebook.github.io/react-native/docs/webview.html#html) 的文档， html 属性已被弃用。它现在说它应该与 source 属性一起使用。 <WebView source= html: '<p>Here I am</p>' />.

文档现在说 Note that static HTML will require setting originWhitelist to ["*"]. 虽然我无法让它工作。

伙计，这看起来很棒，除了我将<WebView source=html: '<p>Here I am</p>' /> 粘贴到我的组件中并且它没有渲染任何东西！帮助！ （我会同时尝试react-native-render-html）

react-native WebView 现已弃用：请改用 react-native-community/react-native-webview。

【参考方案2】：

我找到了这个组件。 https://github.com/jsdf/react-native-htmlview

该组件采用 HTML 内容并将其呈现为原生视图，具有可自定义的样式和链接处理等。

【讨论】：

带有 CSS 的 HTML 样式不适用于 react-native-htmlview。如果这是一个问题，我不推荐它。

也不推荐。

现在是 2019 年，我看不到现代的、最近更新的、可用的选项！

实际上它确实帮助我在滚动视图中渲染具有高度的html，谢谢

@RenatoBack 如果您需要内联 CSS 支持，请参阅 ***.com/a/54899575/2779871

【参考方案3】：

一个纯 JavaScript react-native 组件，可将您的 HTML 呈现为 100% 原生视图。它的可定制性极高且易于使用，旨在能够渲染您扔给它的任何东西。

react-native-render-html

与嵌入式WebViews 相比，使用此组件将改善您的应用程序内存占用和性能。

安装

npm install react-native-render-html --save or yarn add react-native-render-html

基本用法

import React from "react";
import  ScrollView, useWindowDimensions  from "react-native";
import RenderHTML from "react-native-render-html";

const html = `
  <h1>This HTML snippet is now rendered with native components !</h1>
  <h2>Enjoy a webview-free and blazing fast application</h2>
  <img src="https://i.imgur.com/dHLmxfO.jpg?2" />
  <em style="textAlign: center;">Look at how happy this native cat is</em>
`;

export default function App() 
  // Allow images to scale to available width
  // with contentWidth prop.
  const  width  = useWindowDimensions();
  return (
    <ScrollView style= flex: 1 >
      <RenderHTML contentWidth=width source= html  />
    </ScrollView>
  );

RenderHTML Props reference

您可以通过类名、标签自定义元素的样式，甚至可以register custom renders for tags。有关the official website 的更多信息。

【讨论】：

我认为从 react-native-render-html 版本 6.0.0 开始，该行实际上应该是：

【参考方案4】：

我使用Js函数替换很简单。

<Text>item.excerpt.rendered.replace(/<\/?[^>]+(>|$)/g, "")</Text>

【讨论】：

您能否添加一些有关此功能或如何/为何工作的信息？

这不会呈现 HTML，它只会去除任何 html 内容。

【参考方案5】：

React Native 更新了 WebView 组件以允许直接呈现 html。这是一个适合我的示例

var htmlCode = "<b>I am rendered in a <i>WebView</i></b>";

<WebView
  ref='webview'
  automaticallyAdjustContentInsets=false
  style=styles.webView
  html=htmlCode />

【讨论】：

html 属性是now deprecated。请改用 source 属性。

【参考方案6】：

 <WebView ref='webview' automaticallyAdjustContentInsets=false source=require('../Assets/aboutus.html') />

这对我有用 :) 我有关于我们的 html 文本文件。

【参考方案7】：

import HTML from "react-native-render-html";
var htmlCode = "<b>I am <i>Italic</i></b>";


<HTML source=html: htmlCode/>