带有html上下文的Redux变量文本[重复]答案

【问题标题】：Redux variable text with html context [duplicate]带有html上下文的Redux变量文本[重复]
【发布时间】：2020-03-11 18:12:58
【问题描述】：

我正在尝试从 redux 状态获取页面上的文本，因此可以在我的后端轻松更改它，但问题是我无法在此状态下使用 html 上下文。如果我在我的页面上使用它，它工作正常：

some text<Link to="/contact">contact</Link>more text

但每当我使用：

{Somevariablefromstate}

其中包含：some text<Link to="/contact">contact</Link>more text 它不会使其成为链接，它只是纯文本，有没有办法防止这种情况发生？

我希望我解释得足够好，以使其易于理解！

【问题讨论】：

不要将 HTML 用作字符串，在渲染时生成正确的 JSX，除非您从其他地方接收 HTML 字符串。
@EmileBergeron 我确实从其他地方收到了 html 字符串
@EmileBergeron 我认为它不适用于您的示例，因为危险的setinnerhtml 不适用于链接
它适用于任何 HTML，但是，如果你想要一个 React 路由器链接，它肯定会失败......
因为你混淆了 JSX 和 HTML。

标签： javascript html reactjs

【解决方案1】：

<Link> 是一个将被转换为有效 HTML 的组件 - 很可能是一些 <a> 链接。您可能应该将<a href="/contact">contact</a> 作为Somevariablefromstate 变量的值。另外，您很可能应该将https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html 用于您的 元素，因此应该如下所示： 

【讨论】：

我试过了，它没有显示
Link 似乎无法与 dangerouslysetinnerhtml 一起使用
我没有看到我的回复的预览，并且我写的大部分内容都丢失了，因为语法与 StackOverflow 相同。对此感到抱歉，希望妈妈的答案现在很清楚
是的，现在它更有意义了，谢谢！虽然使用链接会有点消除使用反应路由器的用处
更好的选择是发送包含例如名称和 href 的对象，如下所示：{name: "contact", href: "/contact"} 然后使用该数据您可以返回 {链接名}。不过，这将只能生成链接。也许有一种方法可以获取 jsx 代码并将其即时转换为有效的 html，但那将是 hacky