面板

import React from 'react';

class Panel extends React.Component {
    constructor(props) {
        super(props);
    }
    
    render(...elements) {
        var props = Object.assign({
            className: this.props.active ? 'active' : '',
            tabIndex: -1
        }, this.props);

        var css = this.css();
        if (css != '') {
            elements.unshift(React.createElement(
                'style', null,
                css
            ));
        }

        return React.createElement(
            'div', props,
            ...elements
        );
    }
    
    static title() {
        return '';
    }
    static css() {
        return '';
    }
}

與簡單窗格的主要區別在於:

  • 面板在指令碼呼叫或滑鼠點選時具有焦點;
  • panel 每個元件都有 title 靜態方法,因此可以通過覆蓋 title 的其他面板元件進行擴充套件(原因在於,為了本地化目的,可以在渲染時再次呼叫該函式,但在此示例的範圍內,title 沒有意義) ;
  • 它可以包含在 css 靜態方法中宣告的單個樣式表(你可以從 PANEL.css 預載入檔案內容)。