Stocker un composant dans une variable et le réutiliser

Question

Ok, j'ai importé les composants sous la forme

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

J'utilise maintenant Drawer et de l'utiliser avec le composant Navigator mon renderScene devient quelque chose comme ceci

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

Ces longues Drawer sont utilisés à maintes reprises. Je veux stocker ce <Payment navigator={navigator} > ou l'autre dans une variable et de la renvoyer avec Drawer une seule fois.

Comment puis-je le stocker et le renvoyer avec le tiroir ?

Remerciements

Answer 1

Je ne sais pas si vous vous posez la question, mais que diriez-vous d'une solution du type

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

Et puis, simplement :

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

Answer 2

Trois options s'offrent à vous :

// 1. Group the drawer props in an object
const drawerProps = {
  xx: ...,
  yy: ...
};
<Drawer {...drawerProps}>
  <Chat navigator={navigator} />    
</Drawer>

// 2. Define a wrapper object that populates the common Drawer props
const CustomDrawer = ({ children }) => (
  <Drawer  xx={} yy={} and a lot more>
    {children}
  </Drawer>
);

// 3. Define a wrapper object that populates the common Drawer props with default props. (Can be 
// overriden.)
const CustomDrawer = ({ 
  xx='XX',
  yy='YY',
  children 
}) => (
  <Drawer  xx={xx} yy={yy} and a lot more>
    {children}
  </Drawer>
);

EDIT : Je n'ai pas bien compris votre question, pour stocker la partie intérieure, il suffit de l'assigner à une variable et de l'utiliser.

const routes = {
  chat: <Chat navigator={navigator} />,
  payment: <Payment navigator={navigator} />,  
}

<Drawer {...drawerProps}>
  { routes[route.id] }
</Drawer>