HTML标签转换为JSX React Native

Question

我将调用一个API，它会返回一些HTML代码：

例如：

<p>Hello there</p><p>Javascripti</p>

我想在我的React Native应用程序中使用这个，但是这一次我想替换所有的 <p> 标记为 <Text> ，因为我可以在React Native中使用它。

我该如何实现这样的效果呢？我找不到如何翻译或解析HTML的方法。

编辑：我使用正则表达式将 <p> 转换成了 <Text> 但它只返回一个字符串。它在屏幕上显示为： <Text>Lorem Ipsum</Text。 我该如何解析成可读取的JSX？

- Nieck

---

你尝试过正则表达式吗？ - Chris

我用Text标签替换了p标签，但是我仍然有一个问题。 - Nieck

Answer 1

JSX基本上是对调用createElement的语法糖（可以在这里, 这里和特别是这里看到）:

React.createElement(component, props, ...children)

一旦你捕获了 <p></p> 标签内的文本，你就可以像这样生成任何标签:

let capturedContent = 'Hello there'

const element = React.createElement('Text', { }, capturedContent)

- Mauricio Pasquier Juan

Answer 2

可以在这里使用正则表达式：

标签已更改

const myRegex = /(<p>|<\/p>)/g;
const myHtml = '<p>Hello there</p><p>Javascripti</p>';

myHtml.replace(myRegex, 'Text');

然后将此放入您的React-Native渲染器中，用于jsx。它可能是这样的。我不知道您的完整设置，所以请见谅：

render() {
 return (
  {myHtml}
 )
}

- ShaneG

---

我刚刚将 p 标签替换为 Text。但它仍然返回一个字符串。因此它会在屏幕上显示：<Text>Hello World</Text>（它会将标签打印到屏幕上）。 /p/g 还将所有的“p”都替换为 “Text”。在 JavaScript 中也是一样的，所以我已经使用了 /<p>/g 和 /</p>/g。 - Nieck

@Raiders 我编辑了我的问题。抱歉我匆忙地写了那个正则表达式。 - ShaneG