react-bootstrap Grid中的宽度和高度相等的单元格答案

【问题标题】：Equal width and height cell in react-bootstrap Gridreact-bootstrap Grid中的宽度和高度相等的单元格
【发布时间】：2017-02-24 02:50:33
【问题描述】：

我正在尝试使react-bootstrap Grid 中的div 单元具有自动相等的宽度和高度。 这些单元格的内容大小会有所不同，整个网格的宽度也会有所不同。目标是使其响应并独立于单元格内容的大小。

另外，我正在考虑为 React 使用像 FlexBox 布局这样现代的东西来实现这一点（如果存在的话）。我以前用过 FlexBox，我知道它可能是实现这种布局的最佳选择。

import { Grid, Row, Col } from 'react-bootstrap';

...

<Grid fluid={true}>
    <Row className="show-grid" style={{border: "1px solid brown"}}>
        {dummyData.map(function(object, i){
            return <Col key={i} sm={6} md={3} style={{border: "1px solid yellow"}}>
                <div style={{width:"100%", height:"100%, border: "1px solid blue", backgroundImage:"url("+dummyData[i].url+")"}}>{dummyData[i].city}</div>
            </Col>;
        })}
    </Row>
</Grid>

【问题讨论】：

标签： reactjs grid flexbox react-bootstrap react-bootstrap-table

【解决方案1】：

解决方案是使用一个将高度设置为宽度的 React 组件作为道具传递。

import React from 'react';
import Dimensions from 'react-dimensions';

class Square extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div
                style={{
                    width:this.props.containerWidth,
                }}>
                {this.props.city}
            </div>
        );
    }
}

export default Dimensions()(Square) // Enhanced component

Grid的相应变化：

<Grid fluid={true}>
    <Row className="show-grid" style={{border: "1px solid brown"}}>
        {dummyData.map(function(object, i){
            return <Col key={i} sm={6} md={3} style={{border: "1px solid yellow"}}>
                <Square image={dummyData[i].url} title={dummyData[i].city} value={dummyData[i].value}></Square>
            </Col>;
        })}
    </Row>
</Grid>

【讨论】：