css - 将ReactJS组件的相同高度设置为div

我的应用程序上有一个仪表板视图，并且有一些图形。当我有要在图中显示的数据时，我正在渲染它，否则，我只是在显示一条消息，指出该组件没有可用的信息。但是，当我呈现消息时，IboxContent的高度与另一个IboxContent的高度不同，为了获得更好的视图，我希望以相同的高度显示它们，即使其中一个（图形）不是被显示。

Screenshot showing both Iboxes

正在渲染的组件：

<div class="row">
  <div className="col-sm-6">
    <Ibox>
      <IboxTitle>
        <h3 className="hfc-green">Entradas</h3>
      </IboxTitle>
      <IboxContent>
        <Chart data={checkins} type="doughnut"/>
      </IboxContent>
    </Ibox>
  </div>
  <div className="col-sm-6">
    <Ibox>
      <IboxTitle>
        <h3 className="hfc-green">Saídas</h3>
      </IboxTitle>
      <IboxContent>
        <Chart data={checkouts} type="doughnut"/>
      </IboxContent>
    </Ibox>
  </div>
</div>

图表组件：

const Chart = ({ data, type }) => {
  if (!type || !data)
    return <div>Não há informações sobre este componente no momento </div>

const Component = ChartJsComponents[
  type[0].toUpperCase() +
  type.slice(1)
];

return (
  <Component
    data={data}
    options={chartOptions}
  />
);
}

最佳答案

您可以使用flexbox做您想做的事情。

用<div class="row">（隐式<div class="row" style={{display: "flex"}}>）更改alignItems: "stretch"，无论图表显示与否，两个<div className="col-sm-6">的高度都相同。

关于css - 将ReactJS组件的相同高度设置为div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51426012/