将多个子引用设置为状态

Question

我通过将回调传递到其ref属性中来检索子组件的DOM节点，如图所示。>>

父组件：

setElementRef = (name, element) => {
    if (element) {
        this.setState({
            ...this.state,
            menuItems: {
                ...this.state.menuItems,
                [name]: prop,
            },
        });
    }
};

render() {
    return <Child refCallback={(node) => this.setElementRef("child", node)} />
}
子组件：

render() {
    return (
        <div ref={this.props.refCallback}/>
}
需要节点中的信息，例如getBoundingClientRect()。但是，我无法设置状态，因为当多个子组件触发回调时，它超过了最大更新深度。有没有一种方法可以在状态中存储多个DOM节点，还是应该避免完全设置状态，而应使用类变量？

如图所示，我通过将回调传递到其ref属性中来检索子组件的DOM节点。父组件：setElementRef =（名称，元素）=> {如果（元素）{this.setState（{...

Answer 1

从理论上讲，引用不是状态。因此，您不应使用状态来存储组件引用。