如何跟踪选定的组件？
我正在处理编码挑战，并且在我的组件之间来回导航时遇到问题。这是我的父组件的一个非常简化的版本：
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';
// COMPONENTS
import 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);
};
Helenr2回答
-
料青山看我应如是
更新：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; -
摇曳的蔷薇
ShoppingBasket.jsconst ShoppingBasket = props => { return ( // your ShoppingBasket component ..... )}** ContactDetails.js **const ContactDetails = props => { return ( // your ContactDetails component ..... )}.... 其他组件相同应用程序.jsimport 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>)
随时随地看视频慕课网APP
相关分类
Java