Question

我有一个React应用程序，该应用程序以模式形式显示许多按钮，这些按钮构成按钮组的一部分。这些按钮的值在状态对象中设置，如下所示。

此刻，这些按钮在我的模态中分别显示在一行上。

我希望它们以网格类型结构显示。由于其中有5个，因此前两行可能是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>
        )
};

显示网格结构中的反应成分

0 个答案: