将字符串转为 JSX - 大括号问题答案

【问题标题】：Turn String to JSX - curly brackets issue将字符串转为 JSX - 大括号问题
【发布时间】：2020-08-17 07:40:24
【问题描述】：

我正在从后端接收字符串：

     "<img src={props.url} className="image"></img>"

在 React 前端我需要将它变成 React 组件。我正在使用dangerouslySetInnerHTML，但它在 HTML 中给了我这个：

<img src="{props.url}" class="image">

所以问题是：src="{props.url}" - src 属性被转换为字符串而不是内联 Javascript，所以我的图像不会加载。

有什么办法解决吗？

【问题讨论】：

嘿，我的回答对你有用吗？

标签： html reactjs string parsing jsx

【解决方案1】：

有一个解决方法，它不涉及任何外部库。有效的jsx可以存储在数组中，如下所示：

const html = [<img src={img} className="image"></img>]
return <div>{ html }</div>

如果将html存储在数组中，可以很简单的渲染出来。

【讨论】：

感谢您的回答。不幸的是，它也不起作用。我猜 ReactHtmlParser 只是对 dangerouslySetInnerHTML 的包装，所以它们做的事情完全一样。
是的，我刚刚意识到这一点。对不起
@Mr.Pear 我发布了另一个潜在的解决方案
感谢您的帮助，尽管您是对的-您可以将 jsx 存储在一个数组中，但我无法从后端获取该数组-我的数据以 JSON 字符串的形式出现。我需要找到一种在前端将 String 转换为 JSX 的方法，唯一的问题是大括号语法。

【解决方案2】：

你可以试试这个，虽然可能有更好的方法，但这确实可以完成你的工作 -

const imageVar = <img src="{props.url}" class="image"> //after using dangerouslySetInnerHTML

cont imageSrc = eval(imageVar.props.src.replace(/['{}]+/g, ""));

return(<img src={srcvar} class={imageVar.props.class} />);

工作demo

希望这对您有所帮助。 :)

【讨论】：