Question

我正在尝试从子组件中获取引用。

我的父组件：

import React, { Component, use } from "react";
import { Transformer } from "react-konva";

export default class SelectProvider extends Component {
  constructor(props) {
    super(props);
    this.shapeRef = React.createRef();
    this.trRef = React.createRef();
    this.setRef = this.setRef.bind(this);
  }

  componentDidMount() {
    console.log("mount");
  }

  setRef(ref) {
    this.shapeRef = ref;
  }

  render() {
    return (
      <>
        {this.props.children({
          setRef: this.setRef,
        })}
        <Transformer ref={this.trRef} />
      </>
    );
  }
}

和孩子：

import React from "react";
import { Rect } from "react-konva";
import SelectProvider from "./TransformerProvider";

const RectangleShape = (props) => {
  return (
    <SelectProvider>
      {({ setRef }) => (
        <>
          <Rect ref={setRef} {...props}></Rect>
        </>
      )}
    </SelectProvider>
  );
};

export default RectangleShape;

不幸的是，我的shapeRef.current在componentDidMount期间未定义，我真的不知道是什么原因引起的。

如果有人向我解释为什么会发生，我会很高兴。谢谢。

Answer 1

您正在使用this.shapeRef = React.createRef();创建参考。

但是在setRef中，您正在覆盖它：

setRef(ref) {
  this.shapeRef = ref;
}

在此指挥官this.shapeRef之后将引用Konva.Rect实例。并且Konva.Rect的实例没有current属性。

因此，您有两种选择：

只需使用this.shapeRef代替this.shapeRef.current
或通过this.shapeRef.current = ref;正确设置引用

演示：https://codesandbox.io/s/quirky-firefly-bre9c?file=/src/index.js

使用渲染道具访问裁判

1 个答案: