Question

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

我需要对我的Renderer组件呈现的画布元素的引用。所以我要求JSX中的ref，并在我得到它时将它设置在我的组件上。我还使用了React上下文，以便所有子组件都可以访问此画布引用。我遇到的问题是，在分配画布ref之前调用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
}

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

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

1 个答案: