Aufruf von Methoden für untergeordnete Komponenten in React

Question

Ich versuche Reacts render() für einige tiefere Komponenten zu umgehen, die auf Canvas zeichnen, aber ich möchte React weiterhin verwenden, um Requisiten usw. zu übergeben. Das Problem, auf das ich stoße, ist das Ich kann mir nicht vorstellen, wie man solche Methoden bei Kindern anruft.

Was ich habe, ist im Grunde:

<canvasRenderer state="active" mode={42}> 
    <itemFoo fill="red" stroke="black" /> 
    <itemBar fill="blue" stroke="black" /> 
</canvasRenderer> 

Dann innerhalb canvasRenderer ich tun möchte:

constructor() { 
    requestAnimationFrame(this.drawFrame); 
} 

drawFrame =() => { 
    React.Children.forEach(children, (child) => { 
    child.drawFrame(); // does not exist 
    }); 
} 

Vorschläge, wie diese Arbeit zu machen?

Answer 1

Wenn Sie eine Methode für das DOM-Element selbst aufrufen müssen, verwenden Sie refs.

class Child extends React.component { 

    drawFrame() { 
    console.log('look ma, a child method!') 
    } 

    render() { 
    <div ref={ el => this.el = el }>Some child content</div> 
    } 

} 

class Parent extends React.component { 
    componentDidMount() { 
    requestAnimationFrame(this.drawFrame); 
    } 

    drawFrame =() => { 
    React.Children.forEach((child) => { 
     child.el.drawFrame(); // does not exist 
    }); 
    } 
}