javascript - 在 ReactJS 中渲染/返回 HTML5 Canvas

Question

我正在尝试使用 React 渲染 Canvas 。 Canvas 内的图形也将由 Reacts render 方法处理。

当前代码确实使用我想要的图形渲染 Canvas 。但我正在寻找一种从 render 方法中返回带有图形的 Canvas 的方法。我想要这个的原因是因为我希望它在“React Way”中工作。

理想情况下，我希望我的代码是这样的:

return(
  <div>
    <canvas id='my_canvas_with_graphics_rendered_in_react'></canvas>
  </div>
);

首先，我想知道这是否可能。或者我是否应该寻找替代方案。

也许我错过了 React 的要点，如果是这样，请告诉我。我确实希望有一个解决方案，因为从我读到的内容来看，React 将自己标榜为 MVC 中的 V。这就是为什么，如果可能的话，这将是我正在尝试做的事情的完美解决方案。我不必担心 Canvas 内的渲染。我只需向组件提供数据，React 就会重新渲染更改。

我在 return 语句中标记了我认为应该包含正确代码的位置。

HTML 代码:

<div id='wrapper'>
    <canvas id='canvas'></canvas>
</div>

jsx 代码:

var MyCanvas = React.createClass({
    render:function(){
        var line = this.props.lines;
        var ctx = this.props.canvas.getContext("2d");

        ctx.strokeStyle = 'rgba(0,0,0,0.5)';
        ctx.beginPath();
        ctx.moveTo(line[0].x0, line[0].y0);
        // .... more code .....
        ctx.stroke();

        return(
            <div>
                /* *********************************
                ??? RETURN MY RENDERED CANVAS
                    WITH GRAPHIC LINES. ????
             This is where I want to return the canvas 
                *********************************  */
            </div>
        );

    }
});


var wrapper = document.getElementById('wrapper');
var canvas = document.getElementById('canvas');
var line1 = { x0: 0, y0: 10, x1: 20, y1: 30 };
var line2 = { x0: 40, y0: 50, x1: 60, y1: 70 };

var myCanvas = <MyCanvas canvas={ canvas } lines={ [line1, line2] } />;
React.render(myCanvas, wrapper);

希望我说清楚了。

Answer 1

你唯一的错误是你不熟悉 react 引用。 试试这个:

class ConnectionChart extends React.Component {

    componentDidMount() {
        let canvas = ReactDOM.findDOMNode(this.refs.myCanvas);
        let ctx = canvas.getContext('2d');

        ctx.fillStyle = 'rgb(200,0,0)';
        ctx.fillRect(10, 10, 55, 50);
    }

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

您可能已经摆脱了 ES6 风格，但您明白了。 当然你也可以用其他方法绘画^^