cjmling cjmling - 3 months ago 14
React JSX Question

Storing component into a variable and reuse it

Ok i got components imported as

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


Now I am using
Drawer
component and using it together with
Navigator
my renderScene become something like this

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


Those lengthy
Drawer
code are being used again and again. I want to store that
<Payment navigator={navigator} >
or the other into a variable and then return that with
Drawer
only once.

How can i store it and return it with Drawer?

Thanks

Answer

Not sure if you are asking this but what about something like:

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

And then, just:

const Scene = routes[route.id];
return (
  <Drawer  xx={} yy={} and a lot more >
    {<Scene navigator={navigator}/>}
  </Drawer>
)