如何将含JSX的字符串解析为React Native可渲染组件？

嘿，我完全懂你的需求——从TextInput拿到的字符串里带了转义的JSX标签，想要把它渲染成真正的React Native富文本组件，用来做帖子里的格式展示对吧？刚好我之前做过类似的需求，给你两个可行的方案：

方案一：使用Markdown语法（更推荐，适合用户输入场景） #

说实话，让普通用户输入JSX标签实在太不友好了，而且还存在安全风险。换成Markdown语法就舒服多了——用户只需要用**加粗文本**、*斜体文本*这类简单标记就能实现富文本，咱们再用专门的库来渲染就行，完美适配帖子创作的场景。

步骤： #

1. 安装依赖：

yarn add react-native-markdown-display
# 或者用npm
npm install react-native-markdown-display

2. 编写代码：

import React from 'react';
import { View } from 'react-native';
import Markdown from 'react-native-markdown-display';

const PostScreen = () => {
  // 假设这是从TextInput获取的Markdown格式内容
  const postContent = "Hi I am default text **I am bold text** *and this is italic*";
  
  return (
    <View style={{ padding: 16 }}>
      <Markdown>{postContent}</Markdown>
    </View>
  );
};

export default PostScreen;

这样渲染出来的内容里，加粗和斜体文本都会自动应用对应样式，而且还支持链接、列表等更多Markdown格式，扩展性拉满。

方案二：解析带转义JSX的字符串（仅限信任输入源） #

如果你实在必须用JSX标签的格式（比如已有历史数据是这种格式），那可以先把字符串里的HTML实体解码，再把JSX字符串转换成React元素。但一定要注意：这个方案有安全风险，只能用于完全信任的输入源（比如用户自己输入的内容，没有外部用户提交的情况），否则可能被注入恶意代码。

步骤： #

1. 安装依赖：

yarn add he @babel/standalone
# 或者用npm
npm install he @babel/standalone

• he用来解码HTML实体（比如把<转成<）
• @babel/standalone用来在客户端编译JSX代码

2. 编写代码：

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import he from 'he';
import * as Babel from '@babel/standalone';

const PostScreen = () => {
  // 从TextInput获取的带转义JSX的字符串
  const str1 = "Hi I am default text <Text style={{fontWeight: 'bold'}}>I am bold text</Text>";
  const [renderedContent, setRenderedContent] = useState(null);

  useEffect(() => {
    try {
      // 第一步：解码HTML实体，得到正常的JSX字符串
      const decodedStr = he.decode(str1);
      // 第二步：把字符串包裹成可编译的React组件代码
      const jsxCode = `
        import React from 'react';
        import { Text } from 'react-native';
        const RichText = () => <Text>${decodedStr}</Text>;
        export default RichText;
      `;
      // 第三步：用Babel编译JSX为可执行的JS代码
      const compiledCode = Babel.transform(jsxCode, { presets: ['react'] }).code;
      // 第四步：执行编译后的代码，获取组件
      const module = {};
      eval(compiledCode);
      const RichTextComponent = module.exports.default;
      setRenderedContent(<RichTextComponent />);
    } catch (err) {
      // 解析失败时回退到显示原始文本
      console.error('解析富文本失败:', err);
      setRenderedContent(<Text>{str1}</Text>);
    }
  }, [str1]);

  return (
    <View style={{ padding: 16 }}>
      {renderedContent}
    </View>
  );
};

export default PostScreen;

总结 #

如果是做用户创作帖子的功能，强烈推荐用方案一的Markdown方式——既安全又易用，用户学习成本低，后期扩展也方便。方案二只适合特殊的历史数据兼容场景，一定要注意安全风险哦。

内容的提问来源于stack exchange，提问作者Muhammad