Ячейка с равной шириной и высотой в реакционной башмачке Сетка

Question

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

Кроме того, я думаю об использовании чего-то современного, такого как FlexBox layout для 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> 

Answer 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 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>