Что такое панель? Это довольно простой компонент, разбивающий видимую область на 2-3 блока:

• Шапка. В шапку обычно выводится заголовок и какие-то (обычно навигационные) элементы правления.
• Тело. В тело панели выводится выводится произвольное содержимое. Часто этот блок делается скроллируемым, чтобы шапка не уходила из поля зрения.
• Подвал. Опциональный блок. Сюда выводят обычно общую для содержимого панели информацию и элементы управления.

Не смотря на кажущуюся простоту, реализации обычно не такие уж и простые. Связано это с тем, что вариантов его использования великое множество.

В шапке может быть, а может не быть:

• Заголовок. Дополнительно у него может быть подзаголовок.
• Хлебные крошки. Они могут быть частью заголовка, а могут — подзаголовка.
• Навигационные ссылки. Такие как "назад", "следующий" и тп.
• Кнопки. Такие как "открыть фильтры", "переключить флаг", "закрыть окно" и другие.

Короче говоря, в шапке может быть почти что угодно. В теле же, определённо должна быть возможность выводить любое содержимое. В подвале содержимое так же может быть произвольным.

Получается, что у панели должно быть минимум 3 параметра, которые принимают "сложное содержимое", то есть такое, которое не является плоским текстом, а содержит иерархию вложенных блоков.

Далее идёт обзор тех готовых решений, которые можно найти в гугле. Для каждого указан размер реализации в строках кода (CLOS). Плюс бонус в конце, для тех, кто доберётся ;-)

ReactJS

wmira/react-panel — 180 CLOS

В шапку выводятся:

• Опциональная иконка перед заголовком.
• Собственно заголовок.
• Опциональный набор кликабельных иконок в правой части шапки.

Размеры тела по умолчанию подстраиваются под содержимое. Полдвал не поддерживается.

Пример использования:

return (
    <Panel
        title={Привет, мир!}
        titleIcon="icon-idea"
        toolbox={[
            {
                className : "icon-close" ,
                onclick : this.onClose.bind( this )
            }
        ]}
        >
        <p>Ты прекрасен!</p>
    </Panel>
)

Резюме: решение для очень частного случая, в коде бардак, документации нет, только один сомнительный пример использования в духе jQuery.

react-bootstrap — 235 CLOS

Шапка и подвал раcсчитанны на вывод простого текста, но есть возможность вывести туда что угодно. Тело подстраивается под размеры содержимого и может быть схлопнуто до нулевой высоты через флаг.

Пример использования:

return (
    <Panel
        header={
            <div>
                <span class="my-title">Привет, мир!</span>
                <Button
                    bsStyle="danger"
                    onclick={ this.onClose.bind( this ) }
                    >
                    Закрыть
                </Button>
            </div>
        }
        footer={
            <Button
                bsStyle="success"
                onclick={ this.onSuccess.bind( this ) }
                >
                О, да!
            </Button>
        }
    >
        <p>Ты прекрасен!</p>
    </Panel>
)

Резюме: не смотря на костыли с оборачиванием списка компонент в div и запихиванием целого дерева в атрибут использовать можно почти для всего. Разве что "схлопываемость" зачастую будет просто лишним грузом, а когда потребуется что-то особенное, то этой куцей реализации скорее всего не хватит.

pivotal-cf/pivotal-ui — 173 CLOS

Шапка разделена на две секции: левую (header) и опциональную правую (actions), куда вы можете выводить любое содержимое. Подвал и тело имеют по одной секции. Для тела можно включить "скроллируемость", чтобы панель не вылезала за пределы области просмотра.

Пример использования:

return (
    <Panel
        className="bg-neutral-10"
        header={
            <h1>Привет, мир!</h1>
        }
        actions={
            <DangerButton onclick={ this.onClose.bind( this ) } >
                Закрыть
            </DangerButton>
        }
        footer={
            <PrimaryButton onclick={ this.onSuccess.bind( this ) }>
                О, да!
            </PrimaryButton>
        }
        >
        <p>Ты прекрасен!</p>
    </Panel>
)

Резюме: всё те же костыли, но реализация компактней, не содержит почти ничего лишнего и чуть удобней в использовании.

Велосипед — 44 CLOS

Как-то не удобно, что часть вёрстки задаётся в атрибутах, а часть в теле. Некоторые функции избыточны, а для реализации других приходится переписывать компонент. А раз всё равно рано или поздно переписывать, то давайте попробуем переписать так, чтобы и гибко получилось и без костылей.

function MyPanel({ className , ...props }) {
    return (
        <div
            { ...props }
            className={ `my-panel-root ${ className || '' }` }
        />
    )
}

function MyPanelTitle({ className , ...props }) {
    return (
        <h1
            { ...props }
            className={ `my-panel-title ${ className || '' }` }
        />
    )
}

function MyPanelHead({ className , ...props }) {
    return (
        <div
            { ...props }
            className={ `my-panel-head ${ className || '' }` }
        />
    )
}

function MyPanelBody({ className , ...props }) {
    return (
        <div
            { ...props }
            className={ `my-panel-body ${ className || '' }` }
        />
    )
}

function MyPanelFoot({ className , ...props }) {
    return (
        <div
            { ...props }
            className={ `my-panel-foot ${ className || '' }` }
        />
    )
}

Панель состоит из 3 опциональных блоков: шапка, тело подвал. Бонусом: можно добавить несколько шапок/тел/подвалов. Для блоков можно использовать как стандартные компоненты от панели, так и собственные, а внутрь них помещать что угодно.

Правда использование чуть более многословно, но зато обошлись без тэгов в атрибутах:

return (
    <MyPanel className="my-panel-skin-pretty">

        <MyPanelHead>
            <MyPanelTitle>Привет, мир!</MyPanelTitle>
            <button onclick={ this.onClose.bind( this ) } >Закрыть</button>
        </MyPanelHead>

        <MyPanelBody>
            <p>Ты прекрасен!</p>
        </MyPanelBody>

        <MyPanelFoot>
            <button onclick={ this.onSuccess.bind( this ) }>О, да!</button>
        </MyPanelFoot>

    </MyPanel>
)

Резюме: относительно компактное и весьма гибкое решение, имеет простой, понятный, правда несколько многословный (что в принципе свойственно XML) интерфейс.

$mol_pager — 11 CLOS

Шапка по умолчанию выводит заголовок. Содержимое любого блока, как и сами блоки могут быть заменены чем угодно. Тело скроллируется, а позиция скролла восстанавливается при перезагрузке.

Реализация настолько компактная, что её не страшно привести прямо тут:

$mol_pager $mol_viewer
    childs /
        < header $mol_viewer
            childs < head /
                < titler $mol_viewer
                    childs /
                        < title
        < bodier $mol_scroller
            childs < body /
        < footer $mol_viewer
            childs < foot /

Пример использования:

$my_app $mol_pager
    title \Привет, мир!
    head /
        < titler
        < closer $mol_clicker_danger
            eventClick > eventClose null
            childs / \Закрыть
    body /
        \Ты прекрасен!
    foot /
        < successor $mol_clicker_major
            eventClick > eventSuccess null
            childs / \О, да!

Резюме: на порядок компактнее реализация дающая тем не менее высокую степень гибкости, использование обходится без костылей, но применяется достаточно необычный синтаксис, требующий освоения. И, да, это не React, а $mol, где интерфейс тоже строится из компонент, которые агрегируют в себе другие компоненты, но компоненты не пересоздаются при каждом рендеринге, а кешируются. :-)

Выводы

В JSX можно сделать и так и сяк, но всё-равно будет что-то не то. Типичные проблемы:

• Жёсткий некастомизируемый код, вынуждающий велосипедить каждый раз когда нужно добавить пару перламутровых пуговиц.
• Лишние функции в общих компонентах. Следствие высокой жёсткости кода.
• Развесистый, непоследовательный интерфейс использования. Обычно содержимое тела передаётся способом отличным от содержимого остальных блоков.
• Все программисты на реакте программируют по разному. Кто как понял — тот так и фигачит. И скорее всего не так, как нужно вам.
• JSX похож на XML и JavaScript, однако не является ни над-, ни помножеством ни того, ни другого. Так что за кажущейся простотой скрывается необходимость разбираться в особенностях уникального синтаксиса.
• Даже простой компонент требует довольно много кода. И чем гибче вы его захотите сделать, тем запутанней получится код.
• Структура компонента, ровным слоем размазывается по его логике. Мимикрия под XML в этом случае становится бесполезной.
• Привлечение верстальщика возможно только после интенсивного курса по JS… после чего он увольняется и идёт работать программистом. :-)

С другой стороны, есть простой и последовательный синтаксис view.tree, оптимизированный для создания гибких компонент с минимумом исходного кода, и которому можно обучить любого верстальщика в считанные дни, после чего и его эффективность значительно повысится (ему не придётся копипастить огромные куски html или вручную накликивать нужные состояния компонентам) и эффективность программиста (ему не придётся "натягивать" вёрстку на логику каждый раз, когда верстальщик обновит макет).

Даже если вы разнорабочий full-stack программист, который умеет и в паттерны, и в семантику, и в стили — ваша эффективность всё-равно повысится за счёт уменьшения объёмов кода и лёгкого и непринуждённого создания компонент (чтобы создать простейшую компоненту достаточно создать файл с содержимым из одной короткой строки).

А как бы вы реализовали компонент "Панель" на вашем любимом фреймворке?

PS. Это не реклама $mol, это реклама языка view.tree. Если вы не готовы променять React на что-то другое, но заинтересовал синтаксис view.tree — можете реализовать его трансляцию в React. Идея view.tree — простая: полноценное управление компонентами не покидая крайне простого языка. А скрипты с логикой на JS/TS прикручиваются сбоку. В реализации $mol логика прикручивается посредством наследования и переопределения свойств, заданных во view.tree.