Reactで子コンポーネントのメソッドを呼び出す

Question

私はReactのrender()をCanvasに描画するいくつかの深いコンポーネントに対してバイパスしようとしていますが、依然としてReactを使用して小道具などを渡したいと思います。私はこのような子供たちのメソッドを呼び出す方法を理解できません。私が持っているもの

は基本的には次のとおりです。次に

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

、canvasRenderer以内に私がやりたい：この作業を行う方法について

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

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

任意の提案ですか？

Answer 1

DOM要素自体のメソッドを呼び出す必要がある場合は、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 
    }); 
    } 
}