Блог

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

Кроме того, я подумываю об использовании чего-то современного, например, макета FlexBox для React, для достижения этой цели (если она существует). Раньше я использовал 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>
 

Решением было использовать компонент 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 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>