Question

我有一个呈现<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，但我找不到类似于我的情况的好例子。

所以任何帮助都会非常感激。

Answer 1

您应该返回一个带有对它的引用的canvas元素。该元素与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节点。

使用ReactJS和HTML5 Canvas

1 个答案: