Reactjs 类到功能组件问题

Question

I am having hard time trying to convert class component to functional component. Requesting your help in this please.

Class code:

import React, { Component } from "react";

import GenericChartComponent from "../GenericChartComponent";
import { drawOnCanvas } from "./EdgeCoordinate";

export default class PriceCoordinate extends Component{
    constructor(props) {
        super(props);
        this.saveNode = this.saveNode.bind(this);
        this.drawOnCanvas = this.drawOnCanvas.bind(this);
    }

    saveNode(node) {
        this.node = node;
    }

    drawOnCanvas(ctx) {     
        drawOnCanvas(ctx, props);
    }

    render() {
        const ref = { ref: this.saveNode } ;

        return <GenericChartComponent           
            canvasDraw={this.drawOnCanvas}           
        />;
    }
}

I have tried to do it this way, but imported function drawOnCanvas is not getting called, also this.node am not sure how to set it.

import React, { Component } from "react";

import GenericChartComponent from "../GenericChartComponent";
import { drawOnCanvas } from "./EdgeCoordinate";

function PriceCoordinate(props){
    const node = null; 

    const saveNode= (node) =>{
        this.node = node;
    }

    const drawOnCanvas = (ctx) => {     
        drawOnCanvas(ctx, props);
    }
     
    const ref = { ref: this.saveNode } ;

    return <GenericChartComponent           
        canvasDraw={this.drawOnCanvas}           
    />;    
}

Answer 1

there are four things here

• one you where trying to assign a parameter to a constant in the save node function

• two you cannot use 'this' keyword in functions only in classes

• three why is the ref variable even there in the first place

• four u are using drawOnCanvas twice one from the import and one from the function which is an error

import React, { Component } from "react";

import GenericChartComponent from "../GenericChartComponent";
import { drawOnCanvas } from "./EdgeCoordinate";

function PriceCoordinate(props){
    let node; 

    const saveNode= (node2) =>{
        node = node2;
    }

    const draw = (ctx) => {     
        drawOnCanvas(ctx, props);
    }
     
    const ref = { ref: saveNode } ;

    return <GenericChartComponent           
        canvasDraw={draw}           
    />;    
}