反应 canvas webglcontextlost

Question

我们如何为 React canvas 组件定义 webglcontextlost 事件处理程序？

class CanvasComponent extends React.Component {
    componentDidMount() {
        const canvasDOMNode = this.refs.canvas.getDOMNode();
        DrawModule.draw(this.props.drawData, canvasDOMNode);
    }

    render() {
        return (
            <canvas id="canvas" ref="canvas" />
        );
    }   
}

我尝试了 <canvas webglcontextlost={ function() { doSomething(); }} />，也尝试了 onWebglcontextlost 和其他驼峰式组合，但我都遇到了 Unknown prop 错误。

我发现唯一可行的方式是 canvasDOMNode.addEventListener("webglcontextlost")，但我更喜欢 React 方式。

注意：我使用 TypeScript，还注意到 DefinitelyTyped 上的 React.d.ts 中缺少此属性。

Answer 1

基本上：

React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. However, React currently strips all unknown attributes, so specifying them in your React app will not cause them to be rendered.

发件人：https://facebook.github.io/react/warnings/unknown-prop.html。在这一点上，这不是反应理解的东西。您最好添加一个手册 addEventListener 作为解决方法。

反应 canvas webglcontextlost

React canvas webglcontextlost

canvas

webgl

typescript

reactjs