在React中通过Context传递一个canvas ref

Question

我正在使用组件实现一些画布渲染.我有以下组件尝试将画布布局到页面,并在组件中的子Stage组件绘制到其上下文.

我需要一个对我的Renderer组件渲染的canvas元素的引用.所以我要求JSX中的ref,并在我得到它时将它设置在我的组件上.我也使用React上下文,以便所有子组件都可以访问此画布引用.我遇到的问题是它似乎getChildContext在分配画布引用之前被调用,因此所有子组件访问未定义的画布并且没有完成绘制.

export default class Renderer extends React.Component {

    static childContextTypes = {
        canvas: PropTypes.object
    };

    getChildContext() {
        console.log("get child context")
        return { canvas: this.canvas };         
    }

    render() {

        return (
            <div className="CanvasHolder" key={0}>
            <canvas className="MainCanvas" ref= { 
                canvas => { 
                    this.canvas = canvas 
                    console.log("got ref");

                }
                } />
            <Stage />
            </div>
            )
    }
}

Answer 1

您可以在进入ref后componentDidMount(仅在渲染后)访问.但是,只有在呈现其所有子项时,才会将父组件视为呈现.因此,孩子ref在呈现之前无法访问父母.而不是canvas直接返回ref,而是尝试传递自定义函数getCanvas():

getCanvas = () => {
  return this.canvas
}

然后在您的子组件中调用此函数来检索canvasref.