Question

我有一个组件，该组件根据是否从后端获取数据来有条件地呈现子<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>
        )
    }
}

我要在这里实现的目的是，如果<ul/>的ID溢出，则想根据我的div是否溢出来添加切换开关。问题是，当我第一次在这些子组之间导航时，它还会重新渲染groupInfo，从而导致重新获取存储在redux存储中以供以后使用的数据，但这也会导致产生新的节点实例，而我无法杀死旧的eventListener。现在componentWillUnmount不被调用，因为该组件只是用新数据重新呈现。

我试图避免根据data.type为<ul/>创建一个子React组件，因为这将涉及主要的重构。

使用ref的条件渲染元素

0 个答案: