Я хочу составить список дочерних элементов, которые имеют значение position: absolute;
, а высота контейнера рассчитывается на основе высоты всех дочерних элементов + отступы.Мы можем предположить, что все дети имеют одинаковый размер.
const ChildItem = React.forwardRef((props, ref) => {
return (
<a ref={ref} style={{ position: 'absolute', top: props.index * 30 + 'px' }}>
child
</a>
);
});
class HeightTest extends React.Component {
constructor(props) {
super(props);
this.state = {
height: 0,
};
this.childElem = React.createRef();
}
componentDidMount() {
// Measure the height of one child
this.setState({ height: this.childElem.current.offsetHeight });
}
render() {
const items = [1, 2, 3, 4];
const PADDING = 20;
return (
<div
style={{
position: 'relative',
padding: PADDING,
height: 2 * PADDING + this.state.height * items.length + 'px',
}}
>
{items.map(item => {
return <ChildItem ref={this.childElem} index={item} key={item} />;
})}
</div>
);
}
}
Технически мне нужно только измерить высоту одного ChildItem
, но сейчас мы передаем ref
всем.Это производительность, или есть лучший способ сделать это?
В идеале мы могли бы просто сказать «измерить высоту всех элементов и установить для этого высоту контейнера» вместо умножения на items.length
заранее спасибо