Является ли целесообразным сохранить ссылку на всех детей в списке? - PullRequest
0 голосов
/ 19 марта 2019

Я хочу составить список дочерних элементов, которые имеют значение 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

заранее спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...