Рендеринг/возврат холста HTML5 в ReactJS

Ответ 1

Ваша единственная ошибка в том, что вы не знакомы с реакциями ref. попробуйте следующее:

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, но вы поняли эту идею. Из-за того, что u может рисовать и другими методами ^ ^

Ответ 2

Вместо использования canvas в вашем методе render вы сделаете что-то вроде этого:

var MyCanvas = React.createClass({
  componentDidMount: function () {
    React.getDOMNode(this).appendChild(this.props.canvas);
  },
  render: function() {
    return <div />;
  }
});

Вы просто визуализируете пустой div и ждете, пока React не смонтирует это. Когда вы монтируете, вы добавляете свой холст к фактическому DOM node, созданному React.

Причиной этого является то, что метод render возвращает только виртуальные узлы DOM, которые React затем переводит на реальные узлы DOM. И поскольку у вас есть реальный DOM node, вы не можете преобразовать его в виртуальный node. Другая причина заключается в том, что вы должны возвращать только узлы из render, которые управляют элементами React. И поскольку вы управляете холстом из-за контроля Reacts, вы должны использовать реальный DOM apis, чтобы управлять им.

Ответ 3

Ключ переопределяет правильные методы жизненного цикла React для рисования. Метод render создает элемент DOM холста, и вы можете добавить обратный вызов refs, чтобы установить ссылку на него, но вам нужно подождать, пока компонент не будет смонтирован для рисования на холсте.

Вот пример, в котором используется обратный вызов, как рекомендуют рекомендации React. Он предназначен для визуализации статического (неанимированного) графического компонента на основе реквизита и обновлений при изменении реквизита. Он также подписывается на событие изменения размера окна, чтобы его можно было динамически масштабировать с помощью CSS (например, width: 100%). Этот пример основан на коде из этого Gist.

export default class CanvasComponent extends React.Component {

    constructor(props) {
        super(props);

        this._resizeHandler = () => {
            /* Allows CSS to determine size of canvas */
            this.canvas.width = this.canvas.clientWidth;
            this.canvas.height = this.canvas.clientHeight;

            this.clearAndDraw();
        }
    }

    componentDidMount() {
        window.addEventListener('resize', this._resizeHandler);

        /* Allows CSS to determine size of canvas */
        this.canvas.width = this.canvas.clientWidth;
        this.canvas.height = this.canvas.clientHeight;

        this.clearAndDraw();
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this._resizeHandler);
    }

    componentDidUpdate(prevProps, prevState) {
        if (this.props.secondRect !== prevProps.secondRect) {
            this.clearAndDraw();
        }
    }

    clearAndDraw() {
        const ctx = this.canvas.getContext('2d');
        if (ctx) {
            ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
            this.draw(ctx);
        }
    }

    draw(ctx) {
        ctx.fillStyle = 'rgb(200, 0, 0)';
        ctx.fillRect(10, 10, 50, 50);

        if (this.props.secondRect) {
            ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
            ctx.fillRect(30, 30, 50, 50);
        }
    }

    render() {
        return (
            <canvas ref={canvas => this.canvas = canvas} />
        );
    }
}

Вы можете установить опору secondRect из родительского компонента или установить его из состояния, чтобы увидеть обновление компонента при обновлении prop. Вы можете расширить эту идею, чтобы создать какой-либо обработчик данных, управляемый данными, например диаграмму или график.