如何跟踪选定的组件？

Question

我正在处理编码挑战，并且在我的组件之间来回导航时遇到问题。这是我的父组件的一个非常简化的版本：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);  };

Answer 1

更新：

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;

Answer 2

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>

)