Question

我正在使用react类组件处理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} />
);

我想在子画布组件中设置动态引用，就像我们将动态道具从父对象传递到子组件一样。我需要将每个画布的预览绘制到一个单独的位置，因此我需要区分每个画布的引用

React js类组件-将引用从父组件传递到画布中的子组件

0 个答案: