在状态中设置多个子引用

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 节点，或者我应该避免完全设置状态并改用 class 变量？

Answer 1

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

在你的情况下，你只需要在 class 上创建对象来保留你的引用（Unline setState 它不会触发重新渲染，并且可以从你的组件中访问它，或者你可以将其作为道具传递)

childRefs = {}


setElementRef = (name, element) => {
    this.childRefs.current[name] = element;
}

// ... and use it like this

someOperation = () => {
    const { child } = this.childRefs;
    if (child) {
        const rect = child.getBoundingClientRect();
    }
}

原始答案-与功能组件和钩子一起使用

如果您需要使用引用，建议使用 useRef（它允许您在不重新渲染组件的情况下更新它的值）来保留实际引用，或者保留一个对象，并仅使用您的引用设置属性.然后您可以在回调或 useEffect 中使用这些引用。

在状态中设置多个子引用

Setting multiple child refs in state

javascript

dom

reactjs

react-ref

react-state