Реагировать на компонент класса js - передача ref из родительского в дочерний компонент в canvas - PullRequest
Новая
       16

Реагировать на компонент класса js - передача ref из родительского в дочерний компонент в canvas

0 голосов
/ 18 октября 2019

Я работаю с 2 холстами, используя компонент класса реагирования, пытаюсь передать ref из родительского в дочерний компонент и динамически установить имя ref для обоих холстов, но я не могу установить текущий ref, так как я не запускаю никакое событие.

Я использую React Js, Redux, canvas. Всякий раз, когда я передаю ссылки, я получаю следующую ошибку: 

Argument appears to not be a ReactComponent. Keys: current
▶ 3 stack frames were collapsed.
DotLine.componentDidMount

  148 | }
  149 | componentDidMount() {
  150 |   //const elem  = this.props.getParentElem;
> 151 |   const canvas = ReactDOM.findDOMNode(this.props.innerRef);
      | ^  152 |   const ctx = canvas.getContext("2d");
  153 |   const base_image = new Image();
  154 |   base_image.src = this.props.imgSrc
View compiled

//Parent component code

class DotLine2Canvases extends Component {
    constructor(props) {
        super(props);      
        this.canvas1 = React.createRef();
        this.canvas2 = React.createRef();
    }

     <DotLine imgSrc={this.props.imgSrc1} ref={this.canvas1} defaultRotation={0} rotate={-30} canvasid='dotline-1' />

    <DotLine imgSrc={this.props.imgSrc2} ref={this.canvas2} defaultRotation={70} rotate={45} canvasid='dotline-2' />


//Child component code
class DotLine extends Component {
  constructor(props) {
    super(props);
}
componentDidMount() {    
    const canvas = ReactDOM.findDOMNode(this.props.innerRef);
    const ctx = canvas.getContext("2d");
    const base_image = new Image();
    base_image.src = this.props.imgSrc

    base_image.onload = function () {
      ctx.drawImage(base_image,
        canvas.width / 2 - base_image.width / 2,
        canvas.height / 2 - base_image.height / 2
      );
    }
  }

render() {
    return (
      <>
        <canvas id="canvas1" ref={this.props.innerRef} width="300" height="300"
        />
       </>
   }
}
const ConnectedToDotline = connect(mapStateToProps,mapDispatchToProps)(DotLine);

export default React.forwardRef((props, ref) =>
  <ConnectedToDotline {...props} innerRef={ref} />
);

Я хочу установить динамические ссылки в дочернем компоненте холста, как если бы мы передавали динамический реквизит из родительского в дочерний компонент. Мне нужно нарисовать предварительный просмотр каждого холста в отдельном, поэтому мне нужно дифференцировать ссылку каждого холста

...