Javascript 在状态中设置多个子参照

我通过将回调传递到其ref prop中来检索子组件的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}/>
}

setElementRef=（名称，元素）=>{
if（元素）{
这是我的国家({
…这个州，
菜单项：{
…this.state.menuItems，
[姓名]：道具，
},
});
}
};
render（）{
返回此.setElementRef（“子”，节点）}/>
}

子组件：

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}/>
}

render（）{
返回(
}

---

节点中的信息，例如

getBoundingClientRect（）

是必需的。但是，我无法设置state，因为当多个子组件触发回调时，它超过了最大更新深度。有没有办法将多个DOM节点存储在状态中，或者我应该避免完全设置状态，而是使用类变量？

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

在您的情况下，您只需要在类上创建对象以保留引用（Unline setState它不会触发重新渲染，并且可以从组件内部访问它，或者您可以将其作为prop传递）

childRefs={}
setElementRef=（名称，元素）=>{
this.childRefs.current[name]=元素；
}
//…像这样使用它
someOperation=（）=>{
const{child}=this.childRefs；
如果（儿童）{
const rect=child.getBoundingClientRect（）；
}
}

原始答案-与功能部件和挂钩一起使用

---

如果您需要使用引用，建议使用useRef（它允许您在不重新提交组件的情况下更新其值）保留实际引用，或保留单个对象，只需设置引用的属性即可。然后，您可以在回调或useEffect中处理这些引用。

Common。他使用的是类组件。他不能在那里使用useRef。@Jimish Forariya由于指出了这一点，我似乎太习惯于函数组件First，pass function要设置状态，请确保正在传播最新状态。

this.setState（s=>（{…s menuItems:{…s.menuItems，[name]：prop，}，}））；