Javascript 使用ReactJS和HTML5画布

我有一个渲染

组件的根组件，

组件渲染功能是：

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元素即可。此元素与DOM节点不同；React使用JSX将其转换为React组件：

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

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

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

render:function（）{
变量样式={
位置：'绝对'，
上图：这个。道具。数据。y，
左：this.props.data.x
}
返回
}

---

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

谢谢。有道理！：）

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