将组件存储到变量中并重用它

Question

好的，我将组件导入为

import Payment from './pages/payment';
import Chat from './pages/chat';

现在我正在使用Drawer组件并将它与Navigator我的 renderScene一起使用变成这样

if( route.id == 'payment'){
    return  <Drawer  xx={} yy={} and a lot more >
              <Payment navigator={navigator} />
            </Drawer>
}

if(route.id == 'chat'){
    return <Drawer  xx={} yy={} and a lot more >
              <Chat navigator={navigator} />
            </Drawer>
}

那些冗长的Drawer代码被一次又一次地使用。我想将那个<Payment navigator={navigator} >或另一个存储到一个变量中，然后Drawer只返回一次。

我如何存储它并用 Drawer 归还它？

谢谢

Answer 1

不确定您是否在问这个问题，但是诸如此类的事情呢：

const routes = {
 payment: Payment,
 chat: Chat
 ...
}

然后，只需：

const Scene = routes[route.id];
return (
  <Drawer>
    <Scene navigator={navigator}/>
  </Drawer>
)