Reactjs: Arrays in jsx

Ammar Najjar · Veröffentlicht am 24. November 2019

Als ich vor einigen Monaten das Reactjs Tutorial ausprobiert habe, ist mir aufgefallen, dass im offiziellen Startercode dieselben div-Elemente in der Methode render() wiederholt werden. Falls sich am Quellcode etwas ändert, liste ich ihn hier auf:

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>
    );
  }

Auf den ersten Blick gefiel mir diese Wiederholung nicht. Selbst für einen React-Anfänger sollten die grundlegenden Array-Operationen in JavaScript ein vertrautes Thema sein.

Also habe ich diesen Abschnitt mit der map-Operation umgeschrieben:

render() {
    return (
      <div>
        {[0, 3, 6].map(j => (
          <div key={j} className="board-row">
            {[j, j + 1, j + 2].map(
                i => this.renderSquare(i)
            )}
          </div>
        ))}
      </div>
    );
  }

Ich denke nicht, dass dies so kompliziert ist, dass es kein React-Anfänger verstehen könnte, und ich würde empfehlen, ähnlichen prägnanten Code zu verwenden, anstatt dieselben Funktionsaufrufe oder Elemente immer und immer wieder zu wiederholen.

Was meinst du?

Nach oben