回调引用在递归组件内返回未定义

Question

我不确定这是否是一个问题或预期的行为。我正在使用递归组件制作下拉菜单，它会一直渲染下拉菜单，直到什么都没有剩下。我还需要获取这些下拉引用，以计算其尺寸。但是，一些返回的引用未定义。这是记录的结果：

undefined
<ul class="sc-htpNat llCSeu">
undefined
<ul class="sc-htpNat fmLgZc">
undefined

这是我的代码：

import React from 'react';
import { NavLi, NavItem, Dropdown } from '../../../css/Navigation.css';
import { Icon } from '../../../css/Common.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

class NavigationItems extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dropdownOpened: false,
            navLiWidth: null,
            navLiHeight: null,
            dropdownHeight: null,
        }
    }
    handleClick = e => {
        e.preventDefault();
        this.setState(prevState => ({
            dropdownOpened: !prevState.dropdownOpened
        }));
    };
    handleClickOutside = e => {
        const target = e.target;
        if (!this.navLi.contains(target)) {
            this.setState({
                dropdownOpened: false
            })
        }
    }
    componentDidMount = () => {
        console.log(this.dropdown);
        const navLiWidth = this.navLi.clientWidth,
                    navLiHeight = this.navLi.clientHeight,
                    dropdownHeight = this.dropdown.clientHeight;
        this.setState({
            navLiWidth: navLiWidth,
            navLiHeight: navLiHeight,
            dropdownHeight: dropdownHeight
        });
        document.addEventListener('click', this.handleClickOutside, false);
    }
    componentWillUnmount = () => {
        document.removeEventListener('click', this.handleClickOutside, false);
    }
    render = () => {
        return (
            <NavLi isDropdown={this.props.isDropdown} innerRef={x => this.navLi = x} style={{height: this.state.dropdownOpened && this.state.dropdownHeight + 'px' }}>
                <NavItem href={this.props.settings.link || '#'} onClick={this.props.isDropdown ? this.handleClick : null}>
                {this.props.settings.icons && this.props.settings.icons.filter(contents => contents.iconPos === 'beforeText').map(contents => 
                    <Icon beforeText key={contents.title}><FontAwesomeIcon icon={contents.title} fixedWidth /></Icon> 
                )} 
                {this.props.settings.title}
                {this.props.settings.icons && this.props.settings.icons.filter(contents => contents.iconPos === 'afterText').map(contents => 
                    <Icon afterText key={contents.title}><FontAwesomeIcon icon={contents.title} fixedWidth /></Icon>
                )}
                </NavItem>
                {this.props.isDropdown && 
                    <Dropdown hierarchy={this.props.settings.dropdownHierarchy} opened={this.state.dropdownOpened} topPos={this.state.navLiHeight} leftPos={this.state.navLiWidth} desPos={10} startPos={50} innerRef={x => this.dropdown = x}>
                        {this.props.settings.items.map(contents => 
                            <NavigationItems settings={contents} isDropdown={!!contents.items} key={contents.title} />
                                                                                                                                                                                                                                                                                                                                    )} 
                                                                                                                                                                                                                                                                                                         </Dropdown>
              }
        </NavLi> 
        );
    };
};

export default NavigationItems

如果这是预期的行为，我可以采用哪些替代方法来找到下拉列表的大小？