我正在處理編碼挑戰，并且在我的組件之間來回導航時遇到問題。這是我的父組件的一個非常簡化的版本：import React, { useState } from 'react';function App() { const [component, setComponent] = useState({ shoppingBasket: true, contactDetails: false, paymentOptions: false, checkout: false, summary: false }); const switchState = input => { const { name, value } = input.target; setComponent({ ...component, [name]: value }); }; return ( <> { component.shoppingBasket && <ShoppingBasket shoppingBasket={component.shoppingBasket} switchState={switchState} /> } { component.contactDetails && <ContactDetails contactDetails={component.contactDetails} switchState={switchState} /> } { component.paymentOptions && <PaymentOptions paymentOptions={component.paymentOptions} switchState={switchState} /> } { component.checkout && <Checkout checkout={component.checkout} switchState={switchState} /> } { component.summary && <Summary summary={component.summary} switchState={switchState} /> } </> );}export default App;它應該是電子商務頁面的結帳屏幕，它從<ShoppingBasket />組件開始。單擊“繼續”時，顯示下一個組件，單擊“返回”時，將返回上一個組件。它們應該按照代碼中顯示的順序出現。我的第一次嘗試是僅在前一個組件評估為真時才顯示下一個組件，但最后它顯示了所有組件，所以這不起作用。注意：我將 switchState 函數和相應的狀態作為 prop 傳遞給子組件。我想最聰明的方法是只顯示當前選擇的組件，但我該怎么做呢？我假設使用 ID？當它只顯示選定的組件時，是否仍然需要跟蹤評估為 true 的先前組件？解決方案：父組件（簡化但有效）：import React, { useState } from 'react';// COMPONENTSimport ShoppingBasket from './components/ShoppingBasket';import PaymentOptions from './components/PaymentOptions';import ContactDetails from './components/ContactDetails';import Checkout from './components/Checkout';import Summary from './components/Summary';export default function App() { const [component, setComponent] = useState(0); const switchComponent = (index) => { setComponent(index); };
2 回答
料青山看我應如是
TA貢獻1772條經驗 獲得超8個贊
更新：
import React, { useState } from 'react';
function App() {
const [component, setComponent] = useState(0);
const switchComponent = index => {
setComponent(index);
};
return (
<>
{
// this act like switch case js function
{
0:
(<ShoppingBasket
//shoppingBasket={component.shoppingBasket} // no need for this
componentIndex={component}
switchState={switchComponent}
/>),
1:
(<ContactDetails
// contactDetails={component.contactDetails}
componentIndex={component}
switchState={switchComponent}
/>),
2:
(<PaymentOptions
// paymentOptions={component.paymentOptions}
componentIndex={component}
switchState={switchComponent}
/>),
3:
(<Checkout
// checkout={component.checkout}
componentIndex={component}
switchState={switchComponent}
/>),
4:
(<Summary
// summary={component.summary}
componentIndex={component}
switchState={switchComponent}
/>)
}[component]
}
</>
);
}
export default App;
搖曳的薔薇
TA貢獻1793條經驗 獲得超6個贊
ShoppingBasket.js
const ShoppingBasket = props => {
return (
// your ShoppingBasket component .....
)
}
** ContactDetails.js **
const ContactDetails = props => {
return (
// your ContactDetails component .....
)
}
.... 其他組件相同
應用程序.js
import React, { useState } from 'react';
function App() {
const [component, setComponent] = useState(0);
const switchComponent = index => {
setComponent(index);
};
return (
<>
{
// this act like switch case js function
//
{
0:
(<ShoppingBasket/>),
1:
(<ContactDetails/>),
2:
(<PaymentOptions/>),
3:
(<Checkout/>),
4:
(<Summary/>)
}[component]
}
// navigation buttons .... always visible
<NavigateButtons
componentIndex={component}
switchState={switchComponent}
/>
</>
);
}
導出默認應用程序；
----------------------------------***----------------
注意：確保下一個和上一個按鈕只是一個拆分組件，以便您可以在不同的其他組件中使用它
const NavigateButtons = (props) => (
<div>
<Button
disabled={componentIndex == 4}
onClick={()=> props.switchState(componentIndex + 1)}>next
</Button>
<Button
disabled={componentIndex == 0}
onClick={()=> props.switchState(componentIndex - 1)}>previous
</Button>
</div>
)
添加回答
舉報
0/150
提交
取消