存储组件到一个变量，然后重新使用

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 xx={} yy={} and a lot more > 
    {<Scene navigator={navigator}/>} 
    </Drawer> 
) 

Answer 2

在这里，你有3种选择：

// 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> 
); 

编辑：我missunderstood你的问题，用于存储你就必须将其分配到一个varible和使用它的内部。

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


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