在 React 中通过 Context 传递画布引用答案

【问题标题】：Pass down a canvas ref through Context in React在 React 中通过 Context 传递画布引用
【发布时间】：2017-08-21 03:37:58
【问题描述】：

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

我需要一个对我的Renderer 组件正在呈现的画布元素的引用。所以我在 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>
            )
    }
}

【问题讨论】：

我还没有遇到这个问题，但我会尽力提供帮助。看起来context 是在ref 属性之前设置的。一种解决方法是在ref 函数内执行setState，以便组件再次呈现，这次使用正确的引用。相关问题：stackoverflow.com/questions/38864033/…
我试过了，它导致了一个无限循环，因为 setState 重新触发了渲染调用，而渲染调用是我设置 ref 的地方。

标签： reactjs canvas

【解决方案1】：

您只能在componentDidMount 之后访问ref（在它被渲染之后）。但是只有当它的所有子组件都被渲染时，父组件才被认为是渲染的。所以孩子们在渲染之前无法访问父母的ref。不要直接返回canvas ref，而是尝试传递自定义函数getCanvas()：

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

然后在你的子组件中调用这个函数来检索canvas ref。

【讨论】：

我也尝试使用上下文来传递参考。问题是 getChildContext 在调用 ref 回调之前只调用一次。
是的，但我建议通过上下文传递函数，而不是参考。 getChildContext() { return { getCanvas: this.getCanvas }; }
使用 useRef hook const canvasRef = useRef(null); 定义 ref，传递给 child 的函数是 const getCanvas = () => { return canvasRef.current }