Question

我想在我的reactjs代码中实现Panel，该代码可以最小化，最大化，可以关闭并可以调整大小。我发现jsPanel是基于javascript的，可以与angular，react和Vue集成。

我在react.js中非常陌生，所以我做不到。

的链接

任何帮助将不胜感激。我的代码-

class App extends React.Component {


    render() {

        return (
            <Row>
                jsPanel.create({
                        theme: {
                            bgPanel: 'url("img/trianglify-primary.svg") right bottom',
                            bgContent: '#fff',
                            colorHeader: '#fff',
                            colorContent: '#000'
                        },
                        headerToolbar: '<span style="font-size:.85rem;">Just some text in optional header toolbar ...</span>',
                        footerToolbar: '<span style="flex:1 1 auto">You can have a footer toolbar too</span>'+
                                    '<i class="fal fa-clock"></i><span class="clock">loading ...</span>',
                        contentSize: {
                            width: function() { return Math.min(730, window.innerWidth*0.9);},
                            height: function() { return Math.min(400, window.innerHeight*0.5);}
                        },
                        position: 'center-top 0 100',
                        animateIn: 'jsPanelFadeIn',
                        headerTitle: 'I\'m a jsPanel',
                        contentAjax: {
                            url: 'docs/sample-content/sampleContentHome.html',
                            evalscripttags: true,
                            done: function (panel) {
                                panel.content.innerHTML = this.responseText;
                                $(panel.content).mCustomScrollbar({
                                    scrollButtons: {enable: true},
                                    theme: 'dark-thin'
                                });
                                Prism.highlightAll();
                            }
                        },
                        onwindowresize: true,
                        callback: function (panel) {
                            jsPanel.setStyles(panel.content, {
                                padding: '10px',
                                fontSize: '1rem'
                            });
                            function clock() {
                                var time = new Date(),
                                    hours = time.getHours(),
                                    minutes = time.getMinutes(),
                                    seconds = time.getSeconds();
                                panel.footer.querySelectorAll('.clock') [0].innerHTML = harold(hours) + ':' + harold(minutes) + ':' + harold(seconds);
                                function harold(standIn) {
                                    if (standIn < 10) {standIn = '0' + standIn;}
                                    return standIn;
                                }
                            }
                            setInterval(clock, 1000);
                        }
                    });
            </Row>           
        );
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

预先感谢

如何将jsPanel与reactjs集成

0 个答案: