使用 ReactJS 和 HTML5 Canvas答案

【问题标题】：Working with ReactJS and HTML5 Canvas使用 ReactJS 和 HTML5 Canvas
【发布时间】：2015-08-11 19:49:52
【问题描述】：

我有一个渲染<Particle />组件的根组件和<Particle />组件渲染功能是：

render: function(){
        var data = this.props.data,
            canvas = document.createElement('canvas'),
            context;

        canvas.style.position = 'absolute';
        canvas.style.top = data.y + 'px';
        canvas.style.left = data.x + 'px';
        context = canvas.getContext('2d');
        context.drawImage(data.img, data.x, data.y, data.tileSize, data.tileSize, 0, 0, data.tileSize, data.tileSize);

        return canvas;
    }

这会返回以下错误：

Uncaught Error: Invariant Violation: Particle.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

我查看了 Flipboard 的 react-canvas，但找不到任何与我的情况类似的好例子。

因此，我们将不胜感激。

【问题讨论】：

标签： javascript html canvas reactjs

【解决方案1】：

您应该只返回一个带有对它的引用的画布元素。该元素与 DOM 节点不同； React 使用 JSX 将其转换为 React 组件：

render: function() {
    return <canvas ref="canvas" />
}

然后在生命周期方法中修改它：

componentWillReceiveProps: function() {
    var canvas = React.findDOMNode(this.refs.canvas);
    canvas.style.position = 'absolute';
    // etc ...
}

您还可以在渲染中设置一些内联样式属性：

render: function() {
    var styles = {
        position: 'absolute',
        top: this.props.data.y,
        left: this.props.data.x
    }
    return <canvas ref="canvas" style={styles} />
}

...但是 context/drawimage 最好放在生命周期方法中，因为您需要访问 dom 节点。

【讨论】：