Question

我已经使用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来代替，但我坚持使用此issue

P.S：我是初学者

如何使用redux和reactjs应用CRUD黄金布局？

0 个答案: