React中使用createRef无法访问iframe的DOM对象问题求助

嘿，作为React新手遇到这个问题太正常了，我来帮你捋明白咋回事～

你碰到的this.myRef.current返回null的核心原因是：你在DOM元素还没完成挂载的时候就急着访问它了。React的createRef()会先创建一个空的ref对象，但只有当组件完全挂载、对应的DOM元素真正出现在页面上之后，React才会把这个DOM元素赋值给ref的current属性。

下面给你具体的解决办法：

1. 在componentDidMount中访问ref #

类组件的componentDidMount生命周期方法会在组件挂载完成（也就是DOM元素已经渲染到页面）后触发，这时候访问current就能稳稳拿到真实的iframe DOM对象了：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    // 这里就能正常获取到iframe的DOM对象了
    const iframeElement = this.myRef.current;
    if (iframeElement) {
      console.log(iframeElement);
      // 现在可以放心修改尺寸啦
      iframeElement.style.width = '100%';
      iframeElement.style.height = '500px';
    }
  }

  render() {
    return <iframe ref={this.myRef} />;
  }
}

2. 检查是否存在条件渲染 #

如果你的iframe是在某个条件判断下才渲染的（比如{showIframe && <iframe ref={this.myRef} />}），那初始状态下showIframe为false时，ref的current自然也是null。这种情况下，你需要在componentDidUpdate中检查条件是否满足，再去访问ref：

componentDidUpdate(prevProps, prevState) {
  // 假设showIframe是state中的值
  if (this.state.showIframe && !prevState.showIframe) {
    const iframeElement = this.myRef.current;
    if (iframeElement) {
      // 在这里修改尺寸
      iframeElement.style.width = '800px';
      iframeElement.style.height = '600px';
    }
  }
}

小补充 #

你之前console.log(this.myRef)能看到有current属性但值为null，是因为React在初始化ref时就会创建包含current属性的空对象，只是还没把DOM元素赋值进去，只有当DOM挂载完成后才会填充这个值哦～

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