如何在页面之间导航以响应钩子

Question

我是反应钩子的初学者，我正在尝试为我的模块的每个页面分配一个状态，并将初始状态设置为介绍页面，并在单击下一步按钮时更改状态（页面）。

这是我的主要付款页面的样子

const [portalStage, setPortalStage] = useState("INTRO");

const Screens = {
    INTRO: <IntroScreen />,
    Post_INTRO: <Payment />, }

useEffect(() => {
    setScreen();
  }, [context]);

const setScreen = async () => {
    setPortalStage("Post_INTRO");
  }

{Screens[portalStage]}

<IntroScreen onClick = {setScreen} />

现在我正在尝试向其中添加一个介绍页面，该页面应始终首先打开，然后在单击介绍屏幕上的下一个按钮时应重定向到主要组件。

const IntroScreen = () => {
  

  return (
    <Wrapper>
      <Content>
        <h1>Coupons only!</h1>
        <p>Increase your eligibility limit today!</p>
        <Button>
        Next
        </Button>
   
      </Content>
    </Wrapper>
  );
};

export default IntroScreen;

通过这种方法，我只能看到主页，而看不到介绍屏幕。我在为两个屏幕分配状态时做错了什么

Answer 1

如果您不想使用不同的路由，一个干净的方法是在单击下一个按钮时重新呈现。如下所示：

MainPaymentPage.js

const MainPaymentPage =(props)=>{
    const [isNextClicked,setNextClicked]=useState(false);
    let componentCode=<IntroScreen click={()=>setNextClicked(true)}/>
    if(isNextClicked){
        componentCode=<Payment/>
    }
    return(
        {componentCode}
    )
}

export default MainPaymentPage;

并在您的 IntroScreen 组件中添加一个点击监听器，如下所示：

const IntroScreen = (props) => {
  

  return (
    <Wrapper>
      <Content>
        <h1>Coupons only!</h1>
        <p>Increase your eligibility limit today!</p>
        <Button onClick={props.click}>
        Next
        </Button>
   
      </Content>
    </Wrapper>
  );
};

export default IntroScreen;

您必须在按钮组件中进行类似的更改，以便它可以处理点击事件。如果 Button 组件来自 MaterialUI 或 Bootstrap 等框架，它应该能够自行处理，但您可能必须将侦听器从 onClick 重命名为您的框架需要的任何名称。

上面代码的工作方式是现在有一个父组件，它有一个状态，根据状态值（在本例中为 isNextClicked）决定显示哪个组件。最初，它将被设置为 false，导致 componentCode 变量被设置为 IntroScreen 的代码。当在介绍屏幕中单击下一个按钮时，它会将父组件（在本例中为 MainPaymentPage）的状态更改为 true，从而导致重新渲染。这次，由于 isNextClicked 为真，componentCode 将设置为您的支付组件的代码。

如何在页面之间导航以响应钩子

How to navigate between pages in react with hooks

reactjs

react-hooks

use-state