Доступ к ссылкам с помощью реквизита - PullRequest
Новая
       36

Доступ к ссылкам с помощью реквизита

0 голосов
/ 30 апреля 2020

Я пытаюсь справиться с поднятием ссылки из дочернего компонента.

Мой родительский компонент: 

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, и я действительно не знаю, что вызывает такое поведение.

Я буду рад, если кто-то объяснит мне, почему это происходит. Спасибо.

1 Ответ

0 голосов
/ 05 мая 2020

Вы используете this.shapeRef = React.createRef(); для создания ссылки.

Но внутри setRef вы перезаписываете его: 

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

После этого командир this.shapeRef будет ссылаться на Konva.Rect пример. И экземпляр Konva.Rect не имеет свойства current.

Таким образом, у вас есть два варианта:

  1. Просто используйте this.shapeRef вместо this.shapeRef.current
  2. Или установить правильное задание через this.shapeRef.current = ref;

Демо: https://codesandbox.io/s/quirky-firefly-bre9c?file= / src / index. js

...