Отобразить реагирующие компоненты в структуре сетки - PullRequest
Новая
       28

Отобразить реагирующие компоненты в структуре сетки

0 голосов
/ 20 мая 2019

У меня есть приложение React, которое отображает количество кнопок в модальном режиме, которые являются частью группы кнопок.Значения для этих кнопок устанавливаются в объекте состояния, как показано ниже.

В настоящий момент эти кнопки отображаются в моем модале, каждая в отдельной строке одна за другой.

Я бы хотелчтобы они отображались в структуре типа сетки.Поскольку их 5, это может быть 2 в первых 2 строках, а затем, если возможно, последняя в третьей строке, возможно, по центру.

Как я могу это сделать?Извините, я понимаю, что не предлагал попытку решения для этого, но я не уверен, с чего начать.Я искал в Интернете и не могу найти примеры, которые соответствуют тому, что я пытаюсь сделать, т.е. где фактические данные для таблицы установлены в состоянии.Я буду продолжать проводить дополнительные исследования, но подумал, что я попрошу здесь, чтобы посмотреть, если кто-то может предложить какие-либо советы. 

const marginSelectionControls = [
    { label: '21+', type: '21plus' },
    { label: '16-20', type: '16to20' },
    { label: '11-15', type: '11to15' },
    { label: '6-10', type: '6to10' },
    { label: '1-5', type: '1to5' }
];

const MarginSelectionControls = (props ) => (

    <div className="btn-group">
        <ButtonGroup toggle={this.toggle}>
        {marginSelectionControls.map( ctrl => (
            <MarginSelectionControl
                key={ctrl.label}
                label={ctrl.label}
                selectMargin={(winningMargin) => props.selectMargin(ctrl.label)}
                selectedmargin={props.selectedmargin}
            />
        ))}
        </ButtonGroup>
    </div>
);

##########################################

const MarginSelectionControl = (props) => {
    const MarginSelectionControlClasses = [classes.PredResSelectControl];
    if (props.selectedmargin === props.label) {
        MarginSelectionControlClasses.push(classes.Less);
    }
    else {
        MarginSelectionControlClasses.push(classes.More);
    }

    return (
        <div className={classes.MarginSelectionControl}>
            <button
                type="button"
                label={props.label}
                className={MarginSelectionControlClasses.join(' ')}
                onClick={props.selectMargin}
                selectedmargin={props.selectedmargin}
            >{props.label}</button>
        </div>
        )
};
...