Question

我有两个绝对定位的兄弟元素。我想使用react-measure将父容器设置为最宽的绝对元素的宽度。我在解决该问题时遇到了一些麻烦。

您似乎无法重新使用measureRef，并且如果嵌套两个Measure组件，则道具会发生冲突？将它们嵌套并在两者之间重命名道具？有没有那么丑的方法？

Answer 1

我想我已经弄清楚了，如果您使用HOC withContentRect，那就更清楚了：

const enhance = compose(
    withContentRect('bounds'),
    renameProp('contentRect', 'rect1'),
    renameProp('measureRef', 'ref1'),
    withContentRect('bounds'),
    renameProp('contentRect', 'rect2'),
    renameProp('measureRef', 'ref2'),
);

const Component = enhance(({ rect1, rect2, ref1, ref2 }) => {
    const width = Math.max(rect1.bounds.width || 0, rect2.bounds.width || 0) + 32;
    return (
        <div style={{position: relative, width }}>
            <div ref={ref1} style={{position: absolute}}>Foo</div>
            <div ref={ref2} style={{position: absolute}}>Bar</div>
        </div>
    );
}

反应措施，得到两个兄弟元素中最宽的宽度？

1 个答案: