使用dangerouslySetInnerHTML React＆amp;电子“小写”

Question

我遇到了一些使用Electron的反应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