React - 动态设置子 div 的高度等于最高邻居的高度答案

【问题标题】：React - Dynamically set height of child div to be equal to that of tallest neighbourReact - 动态设置子 div 的高度等于最高邻居的高度
【发布时间】：2020-06-28 17:21:17
【问题描述】：

我有一个容器 div，其中包含子 div，子 div 本身包含子 div - 布局可以通过下图解释：

C 的内容是动态的，因此它的高度也是动态的。

我设法让 B div 都具有相同的高度，等于通过设置最高的 B div 的高度：

display: flex; 
align-items: stretch; 
flex-wrap: wrap;

在此处建议的 A 容器上 (How to make floating divs the height of the tallest element for each row)。但是，我不确定如何让所有 C 的高度完全相同 - 我希望所有卡片中的 C div 具有相同的高度，无论 C 的内容如何，并且等于最高 C div 的高度（在图片中这将是第一个 C div）。

我正在使用 React 构建我的网站，因此我可以使用特定于 React 的解决方案来解决这个问题。

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

为了解决这个问题，我将我的动态 div C 包裹在 ReactHeight 组件中：

<ReactHeight onHeightReady={this.reportCardHeight}>
   <CDiv cardHeight={cardHeight}>
   ...children  
   </CDiv>
</ReactHeight>

我将cardHeight 属性传递给它并使用它来设置高度（使用StyledComponents）：

const CDiv = styled.div`
    height: ${props => props.cardHeight && `${props.cardHeight}px`};
`;

接下来，我的reportCardHeight 函数调度一个更新我的状态的操作：

reportCardHeight = height => {
    const { setCardHeight} = this.props;
    setCardHeight(height);
};

我的减速器使用如下：

const cardHeightReducer = (state = initialState, action) => {
    switch (action.type) {
        case SET_CARD_HEIGHT:
            return {
                ...state,
                cardHeight: Math.max(
                    state.cardHeight || 0,
                    action.height
                ),
            };
        default:
            return state;
    }
};

因此，当内容被加载到CDiv时，最大高度存储在状态中，所有其他CDiv依次使用该状态中的这个值来更新自己的高度。

【讨论】：

我不会在 redux 中跟踪与 UI 相关的易失性数据。元素高度取决于浏览器的字体大小，不被视为全局应用程序状态。确实需要协调不同组件之间的最大高度，但 redux 并不是实现这一目标的唯一方法。有反应上下文，或者你可以有一个简单的 ES6 模块来跟踪 let 变量中的最大高度，比如单例。