javascript - Add <div> elements to arrays in JSX?

I'm following a react tutorial which implements a tic-tac-toe game. The board is rendered using a hard-coded list of <div>s, like so:

  render() {
    return (
      <div>        
        <div className="board-row">
          {this._renderSquare(0)}
          {this._renderSquare(1)}
          {this._renderSquare(2)}
        </div>
        <div className="board-row">
          {this._renderSquare(3)}
          {this._renderSquare(4)}
          {this._renderSquare(5)}
        </div>
        <div className="board-row">
          {this._renderSquare(6)}
          {this._renderSquare(7)}
          {this._renderSquare(8)}
        </div>
      </div>
    );
  }

I'm trying to convert it to using two for loops instead of hard-coding the squares. Here's what I have. this.state.rows and this.state.columns are both 3, set in the constructor().

  render() {    
    var rows = [];
    for (var i = 0; i < this.state.rows; i++) {
      rows.push(<div className="board-row">);
      for (var j = 0; j < this.state.columns; j++) {
        rows.push(this._renderSquare(i + j))
      }
      rows.push(</div>)           
    }
    return (
      <div>
        {rows}
      </div>     
    )
  }

Codepen is plaining about an unexpected token in the inner for loop of this code. However, if I ment out the lines which push the board-row div into rows, it works fine (but then renders as a single line of 9 boxes).

What am I doing wrong? Can't <div> elements be stored in arrays? Looking at some React JSX documentation, I see that they have a <div> stored in a var, so I'm not sure what I'm doing differently.

Complete codepen is here:

I'm following a react tutorial which implements a tic-tac-toe game. The board is rendered using a hard-coded list of <div>s, like so:

  render() {
    return (
      <div>        
        <div className="board-row">
          {this._renderSquare(0)}
          {this._renderSquare(1)}
          {this._renderSquare(2)}
        </div>
        <div className="board-row">
          {this._renderSquare(3)}
          {this._renderSquare(4)}
          {this._renderSquare(5)}
        </div>
        <div className="board-row">
          {this._renderSquare(6)}
          {this._renderSquare(7)}
          {this._renderSquare(8)}
        </div>
      </div>
    );
  }

I'm trying to convert it to using two for loops instead of hard-coding the squares. Here's what I have. this.state.rows and this.state.columns are both 3, set in the constructor().

  render() {    
    var rows = [];
    for (var i = 0; i < this.state.rows; i++) {
      rows.push(<div className="board-row">);
      for (var j = 0; j < this.state.columns; j++) {
        rows.push(this._renderSquare(i + j))
      }
      rows.push(</div>)           
    }
    return (
      <div>
        {rows}
      </div>     
    )
  }

Complete codepen is here: http://codepen.io/rbd/pen/jrqjeV?editors=0010

Share Improve this question asked Jun 18, 2016 at 18:53 Rohan Dhruva 1,2241 gold badge11 silver badges22 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 17

rows.push(<div className="board-row">); is not legal JSX. Keep in mind what JSX actually transpiles to:

Consider var Foo = <div className="board-row" />. (self closing)

This will turn into:

var Foo = React.createElement("div", { className: "board-row" })

If you have children in your jsx:

var Foo =
  <div className="board-row">
    <span />
  <div>

It will turn into this: (third argument is children)

var Foo = React.createElement("div", { className: "board-row" },
  React.createElement("span")
)

So there really is no such thing as calling createElement with just an opening or just closing tags.

That being said you could rewrite your loop such that the inner loop is adding child nodes. Also the _renderSquare function is expecting increasing numbers from 0 - 8. You had i + j, but this isn't the right equation as that way you will get 0, 1, 2, 1, 2, 3, 2, 3, 4.

var rows = [];
var cells = [];
var cellNumber = 0; <-- keep track of increasing value
for (var i = 0; i < this.state.rows; i++) {
  for (var j = 0; j < this.state.columns; j++) {
    cells.push(this._renderSquare(cellNumber))
    cellNumber++
  }
  rows.push(<div className="board-row">{ cells }</div>)
  cells = [];
}

It will plain about adding a missing key prop, so always make sure to do that when creating elements in a loop. You will need to do that here in your div and in your _renderSquare function on the Square. Using the index as the key should be fine in this case.

codepen

I can see that part of the problem is you are missing quotes on your push methods.

rows.push(<div className="board-row">);

should be

rows.push('<div className="board-row">');

and

rows.push(</div>)

should be

rows.push('</div>');

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Add <div> elements to arrays in JSX? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)