reactjs - 在 React 中通过 Context 传递 Canvas 引用

Question

我正在努力使用组件来实现一些 Canvas 渲染。我有以下组件，它尝试将 Canvas 布局到页面，并让 Stage 组件中的子组件绘制到其上下文。

我需要对我的 Renderer 组件正在渲染的 Canvas 元素的引用。因此，我在 JSX 中请求 ref，并在获取时将其设置在我的组件上。我还使用 React 上下文，以便所有子组件都可以访问此 Canvas 引用。我遇到的问题是，似乎 getChildContext 在分配 Canvas 引用之前被调用，因此所有子组件都访问未定义的 Canvas ，并且没有完成任何绘制。

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

只有在 componentDidMount 中(渲染后)才能访问 ref。但只有当其所有子组件都被渲染时，父组件才被视为已渲染。因此，子级在渲染之前无法访问父级的 ref。不要直接返回 canvas ref，而是尝试传递自定义函数 getCanvas():

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

然后在您的子组件中调用此函数来检索 canvas 引用。