Reactjs 自定义元素按字符串渲染答案

【问题标题】：Reactjs custom element rendering by stringReactjs 自定义元素按字符串渲染
【发布时间】：2021-05-22 03:07:48
【问题描述】：

我在使用 React.js 时有一个问题

我从后端得到了一些字符串我需要在我的 react jsx DOM 中输入它们

后端给了我这些字符串

from Backend => 
let testString = '<TestTag />'

我只想执行 DangerouslyInnerHTML

from Frontend =>

const TestTag = styled.div`
width: 100px;
height: 100px;
background-color: yellow;
`

function Example() {

  const html = `
    testString
  `
  return (
    <InnerHTML html={html} />
  )
}

预计会显示黄色框，但是打印了空元素

我应该怎么做才能解决这个问题？

【问题讨论】：

您是说您希望字符串文字呈现，即您不希望“TestTag”被解释为自定义 html 标记？
@DrewReese 不，完全相反，对不起我的英语不好。我想通过接收字符串呈现自定义标签（黄色框！）
你不能，通过dangerouslySetInnerHTML，它是用于 HTML 文本的。在您的示例中，TestTag 是一个反应组件。听起来你想Choose the Type at Runtime。或者，也许您只需要一些针对该标签并应用样式的范围内的 CSS。
@DrewReese 感谢您回复我。你的意思是，[通过字符串显示反应组件]无论如何都是不可能的？
React 组件是函数，而不是字符串，因此 JSX 的字符串文字与 React 框架正在维护和处理的 JSX 不同。 React 组件不会在 DOM 中渲染为元素，只有它们从渲染函数返回的内容才会渲染到 DOM 中。

标签： reactjs dangerouslysetinnerhtml

【解决方案1】：

看起来你错过了语法。它在 React 元素中也不起作用。在里面渲染它

使用 dangerouslySetInnerHTML 的正确语法是

<div dangerouslySetInnerHTML={{ __html: html }} />

【讨论】：

哦，我用的是npm库，标签的意思是dangerousltySetInnerHTML