[英]How to convert string to jsx in react native
我正在尝试将JavaScript字符串显示为jsx,似乎没有办法在本地本机中将字符串显示为jsx,例如const test = '<Text>hello</Text>'
render() { return ({test})}
。
给定以下字符串
const svg = '<Svg.G fill="none" fill-rule="evenodd"> <Svg.Path fill="none" d="M0 0h24v24H0z"/> <Svg.Path stroke="#333" stroke-linecap="round" stroke-linejoin="round" d="M3.5 12.5h17v9h-17zM13.5 12.5v9M10.5 12.5v9M1.883 9.602l18.353-4.918.776 2.898L2.66 12.5z"/> <Svg.Path stroke="#333" stroke-linejoin="round" d="M6 6.857c.957.553 4.675.393 4.675.393S8.957 3.945 8 3.393a2 2 0 1 0-2 3.465zM15.296 4.366c-.546.956-3.852 2.674-3.852 2.674s-.164-3.718.388-4.674a2 2 0 1 1 3.464 2z"/> <Svg.Path stroke="#333" stroke-linecap="round" stroke-linejoin="round" d="M12.508 6.755l.777 2.897M9.61 7.531l.776 2.899"/></Svg.G>';
然后我想像下面这样渲染它
render() {
return (
<View>
<Svg>
{svg}
</Svg>
</View>
);
}
这什么都不呈现,如何呈现此字符串,或者我应该将字符串转换为数组并将其呈现为数组?
这不是您问题的答案,但也许可以帮助您弄清楚如何做自己想做的事情。 我强烈不建议使用这种方法;)
因此,您不能仅将eval用作此字符串,因为您需要将jsx转换为js 。 Babel在构建阶段为我们做这件事,但是您可以解析一个字符串并将其转换为React.createElement形状。
仅当您知道所接收组件的字符串格式是什么时,它才有效
我只为您的示例提供示例( <Text>hello</Text>
),因为它虽然容易得多,但是可以帮助您获得想法。
import React, { PureComponent } from 'react';
import RN, { View } from 'react-native';
function mapStringToComponent(stringToRender) {
const parseResult = stringToRender.match(/<([a-z]*)>(.*)<\/[a-z]*>/i);
// result of this regex ["<Text>hello</Text>", "Text", "hello"]
if (parseResult !== null) {
const [, compName, innerText] = parseResult;
return React.createElement(
RN[compName],
null, // here may be an object with attributes if your node has any
innerText,
);
}
return null;
}
export default class MyDynamicComponent extends PureComponent {
render() {
const component = mapStringToComponent('<Text>hello</Text>');
return (
<View>
{component}
</View>
);
};
}
在这里,您可以检查转换后的svg字符串的外观: babel链接
我试图用谷歌搜索一些可以为您做的lib,但是没有找到。 也许我不擅长使用Google搜索:)
我保存了要尝试显示为svg文件的svg const并将其打开,但是它为空
所以尝试修复它
在react native中显示svg的最佳方法是这种方式
import Image from 'react-native-remote-svg';
<View>
<Image source={require('./assets/picture.svg')} />
</View>
您可以使用dangerouslySetInnerHTML
设置InnerHTML来设置HTML。 但是请小心,名称没有误。 根据HTML的来源,这可能允许某人将脚本嵌入到您的站点中。 可以这样使用
render () {
<View>
<SVG dangerouslySetInnerHTML={svg}></SVG>
</View>
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.