Један од најједноставнијих начина да одвојите податке од ХТМЛ докумената је да их сачувате у ЈСОН формату. ЈСОН је популаран и лак за рад, посебно у ЈаваСцрипт-у.
У Реацт-у има смисла служити ЈСОН податке преко табела користећи компоненту. Та компонента ће моћи да генерише табелу која се прилагођава ЈСОН подацима. Резултујућа табела може имати онолико редова колико је потребно пошто подаци нису чврсто кодирани.
Шта ће вам требати
Требаће вам Ноде.јс инсталиран на вашој машини да бисте пратили овај водич и основно разумевање како Реацт функционише.
Пре креирања табеле, мораћете креирајте нови Реацт пројекат ако га немате.
Креирање ЈСОН података
Табела ће користити податке ускладиштене у ЈСОН датотеци. Могао би могли бисте преузети ове податке са АПИ крајње тачке у апликацији из стварног живота.
У фасцикли срц креирајте нову датотеку под називом дата.јсон и додајте следеће:
[{
"ид": 1,
"име": "Етхелред",
"презиме": "Полако",
"емаил": "есловли0@гоогле.ес"
},{
"ид": 2,
"име": "Рета",
"презиме": "Воолмер",
"емаил": "рвоолмер1@миибеиан.гов.цн"
},{
"ид": 3,
"име": "Арабел",
"презиме": "Пестор",
"емаил": "апестор2@блогловин.цом"
}]
Ово је једноставна ЈСОН датотека која садржи три објекта.
Кључеви објекта — ид, име, презиме и адреса е-поште — су наслови, док њихова одговарајућа својства чине тело табеле.
Креирање компоненте табеле
Креирајте нову датотеку под називом Табле.јс у фасциклу срц и додајте следећи код.
извозУобичајенофункцијаСто({тхеадДата, тбодиДата}) {
повратак (
<сто>
<тхеад>
<тр>
// ред заглавља
</tr>
</thead>
<тбоди>
// подаци о телу
</tbody>
</table>
);
}
Ова компонента узима тхеадДата и тБодиДата као реквизите. тхеадДата садржи податке које ћете приказати у реду заглавља. Апликација ће добити ове податке из ЈСОН датотеке и предати их компоненти Табле.
Направите функцију у Апп.јс под називом гетХеадингс() и додајте следеће.
конст гетХеадингс = () => {
повратакОбјекат.кључеви (подаци[0]);
}Пошто су кључеви за сваки објекат у ЈСОН датотеци слични, можете једноставно користити кључеве из првог објекта.
Не заборавите да увезете дата.јсон у Апп.јс.
увоз података из "./дата.јсон"
Када рендерујете компоненту Табле, проследите наслов и ЈСОН податке као пропс.
<Табела тхеадДата={гетХеадингс()} тбодиДата={дата}/>Креирање реда заглавља
У овом кораку, креираћете компоненту за приказивање ставке у реду заглавља. Ова компонента ће итерирати преко наслова користећи мап() метод.
У Табле.јс додајте код за понављање наслова унутар ознаке тхеад.
<тр>
{тхеадДата.мап (наслов => {
повратак <тх кеи={хеадинг}>{хеадинг}</th>
})}
</tr>Затим ћете попунити тело табеле.
Креирање редова тела
Тело табеле приказује податке реда. Пошто Табле.јс прима податке као низ објеката, мораћете прво да га поновите да бисте добили сваки објекат који представља ред.
Дакле, у Табле.јс, поновите тБодиДата проп на следећи начин:
<тбоди>
{тбодиДата.мап((ред, индекс) => {
повратак <тр кеи={индек}>
// подаци реда
</tr>;
})}
</tbody>
Сваки објекат реда ће бити сличан примеру објекта испод.
конст ред = {
"ид": 1,
"име": "Етхелред",
"презиме": "Полако",
"емаил": "есловли0@гоогле.ес"
}
Да бисте приказали сваку од ових ставки, мораћете да пређете преко кључева објекта. У свакој итерацији, добићете својство које одговара том кључу у објекту реда. Пошто су ови кључеви исти као и наслови, користите вредности из тхеадДата пропа.
Измените ознаку тр да бисте приказали податке реда као што је приказано испод.
<тр кеи={индек}>
// тхеадДата садржи кључеве
{тхеадДата.мап((кључ, индекс) => {
повратак <тд кључ={ред[кључ]}>{ред[кључ]}</td>
})}
</tr>;
Доводећи све заједно, компонента Табле би требало да изгледа овако:
извозУобичајенофункцијаСто({тхеадДата, тбодиДата}) {
повратак (
<сто>
<тхеад>
<тр>
{тхеадДата.мап (наслов => {
повратак <тх кеи={хеадинг}>{хеадинг}</th>
})}
</tr>
</thead>
<тбоди>
{тбодиДата.мап((ред, индекс) => {
повратак <тр кеи={индек}>
{тхеадДата.мап((кључ, индекс) => {
повратак <тд кључ={ред[кључ]}>{ред[кључ]}</td>
})}
</tr>;
})}
</tbody>
</table>
);
}
У
елемента, компонента понавља низ података и враћа ред табеле за сваки објекат.Коришћење компоненте табеле
Увезите табелу у Апп.јс и рендерујте је као што је приказано у наставку:
увоз Сто из './Сто';
увоз података из "./дата.јсон"
функцијаАпликација() {
конст гетХеадингс = () => {
повратакОбјекат.кључеви (подаци[0]);
}
повратак (
<див цлассНаме="контејнер">
<Табела тхеадДата={гетХеадингс()} тбодиДата={дата}/>
</div>
);
}
извозУобичајено Апликација;
Компонента табеле узима тхеадДата и тбодиДата као реквизите. тхеадДата садржи наслове генерисане из кључева прве ставке у ЈСОН подацима, а тбодиДата садржи целу ЈСОН датотеку.
Стилизирање са ЦСС модулима
У овом водичу сте генерисали компоненту Реацт табеле из ЈСОН датотеке. Такође сте научили како можете да манипулишете ЈСОН подацима у складу са вашим потребама. Можете побољшати изглед своје табеле додавањем мало ЦСС-а. Да бисте креирали ЦСС стилове локалног опсега, размислите о коришћењу ЦСС модула. Једноставан је за употребу и лак за почетак ако користите апликацију за креирање-реаговање.