إحدى الطرق المباشرة لفصل البيانات عن مستندات HTML الخاصة بك هي تخزينها في JSON. JSON شائع ويسهل التعامل معه ، خاصة في JavaScript.
في React ، من المنطقي تقديم بيانات JSON عبر جداول باستخدام مكون. سيتمكن هذا المكون من إنشاء جدول يتناسب مع بيانات JSON. يمكن أن يحتوي الجدول الناتج على العديد من الصفوف التي يحتاجها لأن البيانات ليست مشفرة.
ما سوف تحتاجه
ستحتاج إلى تثبيت Node.js على جهازك لاتباع هذا البرنامج التعليمي وفهم أساسي لكيفية عمل React.
قبل إنشاء الجدول ، سوف تحتاج إلى إنشاء مشروع React جديد إذا لم يكن لديك واحد.
إنشاء بيانات JSON
سيستخدم الجدول البيانات المخزنة في ملف JSON. يمكنك جلب هذه البيانات من نقطة نهاية API في تطبيق واقعي.
في المجلد src ، أنشئ ملفًا جديدًا يسمى data.json وأضف ما يلي:
[{
"هوية شخصية": 1,
"الاسم الاول": "اثيلريد",
"اللقب": "ببطء",
"البريد الإلكتروني": "[email protected]"
},{
"هوية شخصية": 2,
"الاسم الاول": "ريتا",
"اللقب": "وولمر",
"البريد الإلكتروني": "[email protected]"
},{
"هوية شخصية": 3,
"الاسم الاول": "أرابيل",
"اللقب": "بيستور",
"البريد الإلكتروني": "[email protected]"
}]
هذا ملف JSON بسيط يحتوي على ثلاثة كائنات.
مفاتيح الكائن - المعرف والاسم الأول واسم العائلة والبريد الإلكتروني - هي العناوين ، بينما تشكل خصائصها المقابلة نص الجدول.
تكوين مكون الجدول
قم بإنشاء ملف جديد يسمى Table.js في المجلد src وأضف الكود التالي.
يصدّرإفتراضيوظيفةالطاولة({theadData، tbodyData}) {
إرجاع (
<الطاولة>
<thead>
<آر>
// مقدمة الصف
</tr>
</thead>
<tbody>
// بيانات الجسم
</tbody>
</table>
);
}
يأخذ هذا المكون theadData و tBodyData كدعامات. تحتوي theadData على البيانات التي ستعرضها في صف الرأس. سيصدر التطبيق هذه البيانات من ملف JSON ويسلمها إلى مكون الجدول.
قم بإنشاء وظيفة في App.js يسمى getHeadings () وأضف ما يلي.
مقدار ثابت getHeadings = () => {
إرجاعهدف.keys (البيانات [0]);
}نظرًا لأن مفاتيح كل كائن في ملف JSON متشابهة ، يمكنك ببساطة استخدام المفاتيح من الكائن الأول.
تذكر استيراد data.json في App.js.
يستورد بيانات من "./data.json"
عند عرض مكون الجدول ، مرر العنوان وبيانات JSON كعوامل خاصة.
<جدول theadData = {getHeadings ()} tbodyData = {data} />إنشاء صف الرأس
في هذه الخطوة ، ستقوم بإنشاء مكون لعرض عنصر في صف الرأس. سيقوم هذا المكون بالتكرار فوق العناوين باستخدام طريقة map ().
في Table.js ، أضف التعليمات البرمجية للتكرار فوق العناوين الموجودة داخل علامة thead.
<آر>
{theadData.map (العنوان => {
إرجاع <المفتاح الخامس = {العنوان}>{عنوان}</th>
})}
</tr>بعد ذلك ، سوف تملأ جسم الجدول.
إنشاء صفوف الجسم
يعرض نص الجدول بيانات الصف. نظرًا لأن Table.js يتلقى البيانات كمصفوفة من الكائنات ، فستحتاج إلى تكرارها أولاً للحصول على كل كائن يمثل صفًا.
لذلك ، في Table.js ، قم بالتكرار على خاصية tBodyData كما يلي:
<tbody>
{tbodyData.map ((row، index) => {
إرجاع <مفتاح tr = {index}>
// معلومات خام
</tr>;
})}
</tbody>
سيكون كل كائن صف مشابهًا لمثال الكائن أدناه.
مقدار ثابت صف = {
"هوية شخصية": 1,
"الاسم الاول": "اثيلريد",
"اللقب": "ببطء",
"البريد الإلكتروني": "[email protected]"
}
لعرض كل عنصر من هذه العناصر ، ستحتاج إلى التكرار على مفاتيح الكائن. في كل تكرار ، ستسترجع الخاصية التي تطابق هذا المفتاح في كائن الصف. نظرًا لأن هذه المفاتيح هي نفس العناوين ، فاستخدم القيم من خاصية theadData.
قم بتعديل علامة tr لعرض بيانات الصف كما هو موضح أدناه.
<مفتاح tr = {index}>
تحتوي // theadData على المفاتيح
{theadData.map ((مفتاح ، فهرس) => {
إرجاع <td key = {row [key]}>{صف [مفتاح]}</td>
})}
</tr>;
عند جمع كل شيء معًا ، يجب أن يبدو مكون الجدول كما يلي:
يصدّرإفتراضيوظيفةالطاولة({theadData، tbodyData}) {
إرجاع (
<الطاولة>
<thead>
<آر>
{theadData.map (العنوان => {
إرجاع <المفتاح الخامس = {العنوان}>{عنوان}</th>
})}
</tr>
</thead>
<tbody>
{tbodyData.map ((row، index) => {
إرجاع <مفتاح tr = {index}>
{theadData.map ((مفتاح ، فهرس) => {
إرجاع <td key = {row [key]}>{صف [مفتاح]}</td>
})}
</tr>;
})}
</tbody>
</table>
);
}
في ال
العنصر ، يتكرر المكون عبر صفيف البيانات ويعيد صف الجدول لكل كائن.استخدام مكون الجدول
استيراد جدول في App.js وعرضه كما هو موضح أدناه:
يستورد الطاولة من './الطاولة'؛
يستورد بيانات من "./data.json"
وظيفةتطبيق() {
مقدار ثابت getHeadings = () => {
إرجاعهدف.keys (البيانات [0]);
}
إرجاع (
<div className ="وعاء">
<جدول theadData = {getHeadings ()} tbodyData = {data} />
</div>
);
}
يصدّرإفتراضي تطبيق؛
يأخذ مكون الجدول theadData و tbodyData كدعامات. تحتوي theadData على العناوين التي تم إنشاؤها من مفاتيح العنصر الأول في بيانات JSON ، وتحتوي tbodyData على ملف JSON بالكامل.
التصميم باستخدام وحدات CSS
لقد أنشأت مكون جدول React من ملف JSON في هذا البرنامج التعليمي. لقد تعلمت أيضًا كيف يمكنك معالجة بيانات JSON لتناسب احتياجاتك. يمكنك تحسين مظهر الجدول الخاص بك عن طريق إضافة بعض CSS إليه. لإنشاء أنماط CSS محددة النطاق محليًا ، ضع في اعتبارك استخدام وحدات CSS النمطية. إنه سهل الاستخدام وسهل البدء به إذا كنت تستخدم تطبيق إنشاء تفاعل.
