Question

我需要使用台式机和移动版制作可重用的表格组件。

如果屏幕低于720像素，则会在div，ul，li和按钮“ load more”的底部显示表格。
如果屏幕大于720像素，它将显示带有tr，td，thead等标签的常规表格，并在底部带有loader的情况下进行无限滚动（不加载more按钮）

我需要将相同的数据传递给该组件。问题在于不同屏幕的结构不同。我的结构如下：

<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组件具有相同的数据并根据屏幕大小显示移动或桌面表

Answer 1

一个简单的条件渲染应该可以工作

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

Answer 2

您可以在if函数中添加一个render()块以返回所需的内容。

render() {
    if(window.innerWidth > 720) {
        return (<InfiniteLoader />)
    } else {
        return (<LoaderAndButton />)
    }
}

如何制作具有特定逻辑的自定义可重用表组件？

2 个答案: