Question

我有一个包含<Header />和<BodyContainer />组件的页面。标头是粘性的，并且浮在主体内容上方，即标头固定在视口的顶部并具有z索引。这意味着BodyContainer需要一些与Header高度相等的顶部填充，以防止header遮盖其下方的内容。此高度需要动态设置-当Header的高度更改时，BodyContainer的顶部填充也会更改。我遇到的问题是Header还具有子组件，其子组件的高度可以动态更改，从而会影响Header的整体高度。

一个解决方案是让Header的任何子组件触发redux操作（使用componentDidUpdate）以更新特定的存储状态。 BodyContainer可以连接到存储状态，并检测该值何时更改，获取Header的新高度并将其顶部填充更新为相同高度。

是否有其他方法可以实现相同目标？

Answer 1

如果两者都包裹在同一个组件中，则在Header上添加一个属性，例如onHeightChange，该属性将在每次更改高度时调用一个函数。然后在BodyContainer中添加类似updatePadding的方法，该方法将由函数以新的高度传入onHeightChange来调用。
示例：

class Wrapper extends React.Component {
    onHeightChange = (newHeight) => {
        if(this.bodyContainer) this.bodyContainer.updatePadding(newHeight);
    }

    render() {
        return (
            <div>
               <Header onHeightChange={this.onHeightChange} />
               <BodyContainer ref={c => this.bodyContainer = c} />
            </div>
        );
    }
}


class Header extends React.Component {
    componentDidUpdate() {
         if(this.props.onHeightChange) this.props.onHeightChange(/*new height*/);
    }
}

class BodyContainer extends React.Component {
    updatePadding = (newHeight) = > {
         // Do your stuff 
    }
}

React-如何根据粘性页眉中孩子的身高变化来调整身体填充？

1 个答案: