面板

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 預載入檔案內容）。