面板

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 预加载文件内容）。