0

我已经使用Golden-layout-react-redux构建了一个黄金布局包装器，并且我正在创建新布局并将它们连接到面板减速器，因此每次我添加一个新面板时，它都会在 GoldenLayoutWraper 中构建。我像这样连接配置内容：

componentDidMount() {
    const config = {
        content: [{
            type: "column",
            content: this.props.panels//here
        }]
    };
    goldenlayout = new GoldenLayout(config, this.layout);

    goldenlayout.registerComponent(
        "IncrementButtonContainer",
        wrapComponent(IncrementButtonContainer, this.context.store)
    );
}
goldenlayout.init();

但是我面临一个问题，即当我将新面板添加到减速器时它没有更新，面板减速器数组增加但 contentIems 没有。所以我被迫这样做：

render() { 
    this.props.panels.map(panel =>
        setTimeout(() => {
            goldenlayout.root.contentItems[0].addChild(panel);
        }, 100)
    );
    return (
        <div className="goldenLayout" ref={input => (this.layout = input)} />
    );
}

这段代码在 GoldenLayoutWrapper 组件 render() 中，这里的问题是： 1- 每次我添加新面板时，它都会添加多个面板，因为它正在添加 panel.length 以及 contentItems[0] 中已经存在的项目。2-当我删除所有面板时，我无法再添加了，因为黄金布局的工作方式是，当只有一个孩子时，它会替换它并成为根孩子，而不是 contentItems[0]，所以这goldenlayout.root.contentItems[0].addChild(panel)会引发错误。

我也尝试改用这个react-golden-layout，但我遇到了这个问题

PS：我是初学者

4

0 回答 0