Как я могу сделать изображение в React, которое использует document.body в renderComponent?

Question

Прямо сейчас у меня есть игра-змея, которая использует React.renderComponent(SnakeGame(null, null ), document.body); внизу кода.Он ссылается на SnakeGame как переменную, содержащую логику игры.В конце концов, я хочу добавить изображения для моей змеи.Я тестирую, помещая локальное изображение marble1.png в функцию рендеринга, но это заставляет все остальное не рендериться, и я не вижу изображение.Мне интересно, как я могу получить это так, чтобы React отображал все?

Вот основная часть кода:

var SnakeGame = React.createClass({displayName: 'SnakeGame',
  getInitialState: function() {
    var start = this.props.startIndex || 21;
    var snake = [start], board = []; board[start] = BODY;
    return {
      snake: snake,
      board: board,
      growth: 0,
      paused: true,
      gameOver: false,
      direction: KEYS.right
    }
  },

  componentDidMount: function() {
    this._resume();
  },

  _reset: React.autoBind(function() {
    this.setState(this.getInitialState());
    this._resume();
  }),

  _pause: React.autoBind(function() {
    if (this.state.gameOver || this.state.paused) { return; }
    this.setState({paused: true});
  }),

  _resume: React.autoBind(function() {
    if (this.state.gameOver || !this.state.paused) { return; }
    this.setState({paused: false});
    this.refs.board.getDOMNode().focus();
    this._tick();
  }),

  _tick: React.autoBind(function() {
    if (this.state.paused) { return; }
    var snake = this.state.snake;
    var board = this.state.board;
    var growth = this.state.growth;
    var direction = this.state.direction;

    var numRows = this.props.numRows || 20;
    var numCols = this.props.numCols || 20;
    var head = getNextIndex(snake[0], direction, numRows, numCols);

    if (snake.indexOf(head) != -1) {
      this.setState({gameOver: true});
      return;
    }

    var needsFood = board[head] == FOOD || snake.length == 1;
    if (needsFood) {
      var ii, numCells = numRows * numCols;
      do { ii = Math.floor(Math.random() * numCells); } while (board[ii]);
      board[ii] = FOOD;
      speedUp = true;
      currTicks=50;
      ticksWithSpeed = 20;
      growth += 2;
    } else if (growth) {
      growth -= 1;
    } else {
      board[snake.pop()] = null;
    }

    snake.unshift(head);
    board[head] = BODY;

    if (this._nextDirection) {
      direction = this._nextDirection;
      this._nextDirection = null;
    }

    this.setState({
      snake: snake,
      board: board,
      growth: growth,
      direction: direction,
      speedUp: speedUp
    });


    var currSpeed = 100;

    if(this.state.speedUp){
      currSpeed = 40;
      currTicks--;
      console.log("number of ticks is "+currTicks);
    }

    if(currTicks == 0){
      speedUp = false;
      currSpeed = 100;
      currTicks=50;
    }

    setTimeout(this._tick, currSpeed);
  }),

  _handleKey: React.autoBind(function(event) {
    var direction = event.nativeEvent.keyCode;
    var difference = Math.abs(this.state.direction - direction);
    // if key is invalid, or the same, or in the opposite direction, ignore it
    if (DIRS[direction] && difference !== 0 && difference !== 2) {
      this._nextDirection = direction;
    }
  }),

  render: function() {
    var cells = [];
    var numRows = this.props.numRows || 20;
    var numCols = this.props.numCols || 20;
    var cellSize = this.props.cellSize || 30;

    for (var row = 0; row < numRows; row++) {
      for (var col = 0; col < numCols; col++) {
        var code = this.state.board[numCols * row + col];
        var type = code == BODY ? 'body' : code == FOOD ? 'food' : 'null';
        cells.push(React.DOM.div( {className:type + '-cell'}, null ));
      }
    }

    return (
      React.DOM.div( {className:"snake-game"}, [
        React.DOM.h1( {className:"snake-score"}, ["Length: ", this.state.snake.length]),
        React.DOM.div(
          {ref:"board",
          className:'snake-board' + (this.state.gameOver ? ' game-over' : ''),
          tabIndex:0,
          onBlur:this._pause,
          onFocus:this._resume,
          onKeyDown:this._handleKey,
          style:{width: numCols * cellSize, height: numRows * cellSize}},
          cells
        ),
        React.DOM.div( {className:"snake-controls"}, [
          this.state.paused ? React.DOM.button( {onClick:this._resume}, "Resume") : null,
          this.state.gameOver ? React.DOM.button( {onClick:this._reset}, "New Game") : null
        ]),
        React.DOM.div({className:"marble"},[

          //<img src={require('marble1.png')} alt="" />

        ])
      ])
    );
  }
});

function getNextIndex(head, direction, numRows, numCols) {
  // translate index into x/y coords to make math easier
  var x = head % numCols;
  var y = Math.floor(head / numCols);

  // move forward one step in the correct direction, wrapping if needed
  switch (direction) {
    case KEYS.up:    y = y <= 0 ? numRows - 1 : y - 1; break;
    case KEYS.down:  y = y >= numRows - 1 ? 0 : y + 1; break;
    case KEYS.left:  x = x <= 0 ? numCols - 1 : x - 1; break;
    case KEYS.right: x = x >= numCols - 1 ? 0 : x + 1; break;
    default: return;
  }

  // translate new x/y coords back into array index
  return (numCols * y) + x;
}

React.renderComponent(SnakeGame(null, null ), document.body);

У меня также возникает ощущение, что часть:

React.DOM.div(
      {ref:"board",
      className:'snake-board' + (this.state.gameOver ? ' game-over' : ''),
      tabIndex:0,
      onBlur:this._pause,
      onFocus:this._resume,
      onKeyDown:this._handleKey,
      style:{width: numCols * cellSize, height: numRows * cellSize}},
      cells
    )

вызывает проблемы, поскольку я указал параметры для DOM, которые будут отрисовываться до того, как он сможет обработать изображение.