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

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 返回该变量仅一次。

如何存放并用抽屉退回？

谢谢

Answer 1

不确定您是否在问这个问题，但是像这样的问题怎么样:

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

然后，只需:

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