ReactJS: المصفوفات في JSX

عمار نجار · نُشر في 24 نوفمبر 2019

react

عندما جربت دليل ReactJS البرنامج التعليمي قبل بضعة أشهر، لاحظت أن في كود البداية الرسمي، كانوا يكررون نفس العناصر div في طريقة render(). في حالة تغيير المصدر، سأذكره هنا:

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

من النظرة الأولى لم يعجبني التكرار، حتى للمبتدئ في React، العمليات الأساسية على المصفوفات في جافاسكريبت يجب أن تكون موضوعا مألوفا.

لذا أعدت هيكلة ذلك القسم باستخدام عملية map:

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

لا أعتقد أن هذا معقد لدرجة أن أي مبتدئ في React لا يستطيع فهمه، وأوصي باستخدام كود مختصر مشابه بدلاً من تكرار نفس استدعاءات الدوال أو العناصر مرارا وتكرارا.

ما رأيك؟

العودة للأعلى