首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >ref在ComponentDidMount中为空

ref在ComponentDidMount中为空
EN

Stack Overflow用户
提问于 2021-08-01 11:02:35
回答 1查看 117关注 0票数 0

我有一个KonvaJS舞台的推荐人。在ComponentDidMount中,this.stageRef.current的值为null。你知道为什么吗?

我的代码如下所示:

代码语言:javascript
复制
import React, { useState } from "react"
import { Stage, Layer, Rect, Text } from 'react-konva';
import Konva from 'konva';

class MyComponent extends React.Component {

  constructor() {
    super()
    this.stageRef = React.createRef()
  }

  componentDidMount() {
    // this.stageRef.current is null here!
  }


  render() {
    return (
      <>
          <Stage id="canvas-text"
            width={400} height={163}
            className="stage"
            ref={this.stageRef}>
            <Layer>
              <Text fontFamily='Karla' fontSize={24} align='center' width={400} y={30} text={"Hello"} />
            </Layer>
          </Stage>
      </>
    )
  }
}

export default MyComponent;
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-08-01 11:26:00

Stage组件是一个函数组件,它将引用转发给其底层的子组件。You can inspect the sources

代码语言:javascript
复制
export const Stage = React.forwardRef((props, ref) => {
  return <StageWrap {...props} forwardedRef={ref} />;
});

您提供的一个直接示例显示了the ref references the underlying StageWrap component appropriately

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68609746

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档