从字符串变量反应本机渲染组件

时间:2018-07-31 08:26:20

标签: javascript react-native jsx

或者也许应该是一个问题,如何将字符串转换为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组件,而不是仅仅作为字符串出现?

我到处搜索,但是没有找到解决方法。

我将不胜感激。

2 个答案:

答案 0 :(得分:0)

如果放置对象而不是字符串,则可以在视图内部轻松设置它。但是,如果要使用字符串,则必须编写一个转换器,并将每个元素提取为字符串,然后检查并转换为等效视图。
如果您的视图中有道具,那么您也必须将其转换(这会有点困难!)

答案 1 :(得分:0)

尝试以下两个软件包之一:

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

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

两者都允许在运行中将字符串解析为jsx(没有机会在RN中进行测试,但是对于Web中的React可以正常工作)