reactjs - 原始HTML随危险地传递SetInnerHTML React和Electron “lowercased”

Question

我在使用Electron的React w/react-photonkit绊了一下，这增加了一些不利因素。我正在尝试基于主侧菜单在光子header中创建动态水平菜单，以便在主要更改时触发水平选项进行更新。

为了尝试了解如何处理此问题，我尝试执行以下操作:

function dynHeader() {
    return { __html: '<ButtonGroup> <Button glyph=\'home\' /> </ButtonGroup>' };
}

...
....render() {
      return (
        <span dangerouslySetInnerHTML={dynHeader()} />
      )
    };

似乎渲染的html都是小写的，这破坏了光子的集成。



如果有人对如何解决此问题有任何想法，请多多帮助。

非常感谢。

Answer 1

这样不可能。

原因是您要添加:

<ButtonGroup> <Button glyph=\'home\' /> </ButtonGroup>

在运行时，它将作为一个简单的HTML标记执行，并且不会被React处理。无论您做什么，它都将始终以这种方式打印。

您可以尝试的是创建一个动态组件，用户可以在其中更改简单文本和类名称。您可以根据用户输入添加多个DOMS。

Dynamic child components