Blazor WASM集成React场景下重渲染后子Ref为null问题求助

问题原因 #

• 全局挂载的window.canvasComponentRef指向的是第一次渲染生成的旧Parent组件实例。调用ReactDOM.unmountComponentAtNode卸载组件时，React会自动将旧实例的所有ref的current属性置为null，旧实例也会被标记为已卸载，不再可用。
• 你调用ReactDOM.render的入参存在错误：第一个参数需要传入React元素（即<Parent />），而非直接传入Parent组件类。错误的传参会导致第二次渲染时没有生成新的Parent实例，也不会触发构造函数更新全局引用，window.canvasComponentRef始终指向已卸载的旧实例。
• 组件卸载时没有清空全局残留的旧实例引用，容易引发内存泄漏和逻辑异常。

解决方法 #

1. 修正ReactDOM.render的调用参数，确保每次渲染都生成新的组件实例：

// 错误写法
ReactDOM.render(Parent, document.getElementById('root'));
// 正确写法
ReactDOM.render(<Parent />, document.getElementById('root'));

2. 给Parent组件添加卸载生命周期，及时清空全局引用：

export class Parent extends React.Component{
  constructor(props){
     super(props);
     this.childRef = React.createRef();
     // 挂载新实例到全局
     window.canvasComponentRef = this
  }

  componentWillUnmount() {
    // 卸载时清空全局的旧实例引用
    if (window.canvasComponentRef === this) {
      window.canvasComponentRef = null;
    }
  }

  render(){
     return <Child ref={this.childRef} />
  }

  parentFoo = () => {
    // 调用前加判空保护，避免运行时报错
    this.childRef.current?.foo();
  }
}

3. 全局调用方法前先判断实例是否存在：

window.canvasComponentRef?.parentFoo();

内容的提问来源于stack exchange，提问作者dayderluv