Как сделать настраиваемый компонент таблицы многоразового использования с определенной логикой? - PullRequest
Новая
       14

Как сделать настраиваемый компонент таблицы многоразового использования с определенной логикой?

0 голосов
/ 26 июня 2018

Мне нужно сделать многократно используемый компонент таблицы с настольной и мобильной версией.

  • Если экран меньше 720px, он покажет таблицу с div, ul, li и кнопкой «load more» внизу.

  • Если экран больше 720px, он будет показывать обычную таблицу с тегами tr, td, thead и т. Д. И бесконечную прокрутку с загрузчиком внизу (без кнопки «загрузить больше»)

Мне нужно передать те же данные этим компонентам. Проблема в разной структуре для разных экранов. Моя структура выглядит так: 

<TableDesktop loading={loading} anotherprops={anotherprops}>
   {data && data.map(el => <tr key={el.id}><td>{el.id}</td></tr>)}
/* here is the loader for infinite scrolling from TableDesktop 
component*/
</TableDesktop>

<TableMobile loading={loading} anotherprops={anotherprops}>
   {data && data.map(el => <li key={el.id}><td>{el.id}</td></li>)}
/* here is the loader and "load more" button from TableMobile 
component*/
</TableMobile>

Это очень упрощенная версия. Реальная структура jsx будет более сложной. Итак, как я могу создать один компонент Table, который будет принимать одни и те же данные и отображать таблицу для мобильного или настольного компьютера в зависимости от размера экрана

Ответы [ 2 ]

0 голосов
/ 26 июня 2018

Вы можете добавить блок if к вашей функции render(), чтобы вернуть то, что вы хотите. 

render() {
    if(window.innerWidth > 720) {
        return (<InfiniteLoader />)
    } else {
        return (<LoaderAndButton />)
    }
}
0 голосов
/ 26 июня 2018

Простой условный рендер должен работать 

render() {
if(screen.width >= 720px) {
  return (
    <TableDesktop loading={loading} anotherprops={anotherprops}>
      {data && data.map(el => <tr key={el.id}><td>{el.id}</td></tr>)}
    </TableDesktop>
  )
else {
  return(
    <TableMobile loading={loading} anotherprops={anotherprops}>
       {data && data.map(el => <li key={el.id}><td>{el.id}</td></li>)}
    </TableMobile>
  )
}

или, если вам нужны условия для включения, вы можете попробовать это, используя троичный оператор 

render() {
  return (
    <div>
    {screen.width >= 720px ? 
      <TableDesktop loading={loading} anotherprops={anotherprops}>
        {data && data.map(el => <tr key={el.id}><td>{el.id}</td></tr>)}
      </TableDesktop>
      :
      <TableMobile loading={loading} anotherprops={anotherprops}>
        {data && data.map(el => <li key={el.id}><td>{el.id}</td></li>)}
      </TableMobile>
    }
    </div>
  )
}
...