从字符串变量反应原生渲染组件

Posted 2023-02-21

【中文标题】从字符串变量反应原生渲染组件

【英文标题】：React Native render Components from String variable

【发布时间】：2019-01-07 13:52:15

【问题描述】：

或者问题应该是，如何将字符串转换为 JSX？

无论如何，我正在尝试对我的 react native 应用程序进行性能改进，这需要我从字符串变量呈现 React native 组件。

例如，

let item = "<View>
  <Text>
      This is an item
  </Text>
</View>";

现在在我的渲染函数中，我想像这样渲染它：

render() 
    return (
      <View>
        item
      </View>
    );

就像现在一样，如果我尝试运行应用程序，它会给出错误，因为我试图在 View 组件中呈现文本。如果我尝试在呈现之前将项目包装在文本中，它只会在屏幕上将项目呈现为纯文本，并将所有 <View> 和 <Text> 标签作为字符串。

然后我怎样才能呈现它，以便字符串中的标签表现得像普通的 React Native 组件，而不是仅仅显示为字符串？

我已经搜索了所有但没有找到解决方案。

我会很感激任何建议。

【问题讨论】：

重复：***.com/questions/42652785/…

@Awa Melvine，没有同样的问题，如果您找到任何解决方案，请分享它

【参考方案1】：

尝试以下两个包之一：

https://www.npmjs.com/package/acorn-jsx

https://www.npmjs.com/package/react-jsx-parser

两者都允许即时将字符串解析为 jsx（没有机会在 RN 中进行测试，但对于 Web 中的 React 可以正常工作）

【参考方案2】：

如果你放置对象而不是字符串，你可以很容易地将它设置在视图中。但是如果你想使用字符串，你必须编写一个转换器并将每个元素提取为字符串并检查并转换为它的等效视图。 如果你的视图有道具，你也必须转换它们（这会有点困难！）