存儲組件到一個變量，然後重新使用

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>