使用ref的条件呈现元素

我有一个组件来呈现一个孩子 <ul/>

class groupInfo extends Component {
    constructor(props) {
        super(props);
        this.setSubGroupRef = this.setSubGroupRef.bind(this);
        this.checkSubgroupOverflow = this.checkSubgroupOverflow.bind(this);
        this.state = {
            data: null,
            overflowingSubgroups: false,
        }
    }
    componentDidMount() {
        //fetch data from backend
        this.setState({data})
    }
    setSubGroupRef(node){
        this.subGroupRef = node;
        node.addEventListener("resize", this.checkSubgroupOverflow);
    }
    componentWillUnmount() {
        if (this.subGroupRef) {
            this.subGroupRef.removeEventListener("resize", this.checkSubgroupOverflow);
        }
    }
    checkSubgroupOverflow() {
        const element = this.subGroupContainer;
        if (element) {
            // Check against baseline rendered height of our subgroup container, plus a few safe pixels.
            // Magic number here because we know what the height *should* be when its collapsed by CSS.
            this.setState({
                overflowingSubgroups: (element.scrollHeight > 36),
            });
        }
    }
    render() {
        const {overflowingSubgroups, data} = this.state
        return (
            <div>
                <div>
                    some information
                </div>
                {
                    data.type === "group" ?
                    <div ref={this.setSubGroupRef}>
                        <ul>
                            {
                                data.subGroups.map((subData) => {
                                    return (
                                        <li>
                                            // display sub-data info
                                        </li>
                                    )
                                })
                            }
                        </ul>
                        {
                            overflowingSubgroups ?
                                <span
                                    className="iconMore"
                                    onClick={this.toggleSubgroupExpansion}
                                >
                                    <img
                                        src={`${iconPath}icon-arrow.svg`}
                                        alt="more"
                                    />
                                </span> :
                            null
                        }
                    </div>
                }
            </div>
        )
    }
}

我想达到的目标是 < 是否溢出id要根据包含的div是否溢出添加切换开关。 问题是,当我第一次在这些子组之间导航时,它也会重新呈现 groupInfo 导致重新获取存储在redux存储中供以后使用的数据,但这也会导致生成新的节点实例,并且我无法杀死旧的eventListener。现在 componentWillUnmount 不调用,因为组件只是用新数据重新呈现。

我试图避免为 < 基于data.type,因为这将涉及一个主要的重构。