在移动和桌面视图中反映重用组件

Question

例如，我想要重复使用图书清单组件。在移动设备中由路由使用，在桌面上由另一条路由使用。

图书清单组件包含指向该图书的链接。棘手的部分是桌面版上的书有桌面图书页面网址的链接，而移动版有指向的链接移动图书页面网址。

这样做的最佳选择是什么？

1在图书清单中有一个标记，表示它应该为移动或桌面呈现;

示例：<BookList type="large" />

示例：<BookList type="small" />

优点：

• 易于使用;
• 容易做，只需要一些if else;

缺点：

• 不是非常可重复使用;

2传递由图书清单组件

调用的getBookUrl之类的道具

示例：<BookList getBookUrl={(book)=> / small / book / $ {book.id} } />

示例：<BookList getBookUrl={(book)=> / large / book / $ {book.id} } />

优点：

• 非常可重复使用;

缺点：

• 难以使用该组件，因为您需要在父级中准备该功能，并且总是很难做到这一点;

3传递一些道具，如getBookUrl（但此功能存储在图书清单组件中），由图书清单组件调用

示例：<BookList getBookUrl={BookList.getBookUrlSmall} />

示例：<BookList getBookUrl={BookList.getBookUrlLarge} />

4传递书单组件

中的一些道具

BookList.small = {
  getBookUrl: (book)=>`/small/book/${book.id}`,
}
BookList.large = {
  getBookUrl: (book)=>`/large/book/${book.id}`,
}

示例：<BookList {...BookList.small} />

示例：<BookList {...BookList.large}/>

5更好的东西，告诉我：）

Answer 1

明确配置组件（例如"small"＆amp; "large"）离响应组件只有一步之遥（根据屏幕大小配置自己）。

但是，如果您处理移动设备的策略（有时）托管一个单独的移动网站，那么这就违背了移动组件的策略。

无论如何，

在不太了解你的具体情况的情况下，我会做这样的事情：

// BookListResponsive.js
import isMobile from "mobile-detector-of-my-choice"
import BookList from "./BookList.js"

export default props => isMobile()
    ? <BookList {...props} getUrl={id => `small/${id}`} />
    : <BookList {...props} getUrl={id => `large/${id}`} />

也许值得检查react-routers dynamic routes

<Media query={PRETTY_SMALL}>
  {screenIsSmall => screenIsSmall
    // small screen has no redirect
    ? <Switch>
        <Route exact path="/invoices/dashboard" component={Dashboard}/>
        <Route path="/invoices/:id" component={Invoice}/>
      </Switch>
    // large screen does!
    : <Switch>
        <Route exact path="/invoices/dashboard" component={Dashboard}/>
        <Route path="/invoices/:id" component={Invoice}/>
        <Redirect from="/invoices" to="/invoices/dashboard"/>
      </Switch>
  }
</Media>