简体   繁体   English

ReactJs 如何链接页面以特定条件打开?

[英]ReactJs How to link a page to open with a certain condition?

I'm working on a website and I have created a profile page in this profile page there are buttons ( Settings, Favourites, Posts) I made it like a multi-step form, when you click one of those buttons it shows one of 3 pages ( each button has an onClick method that sets the page number and an if functions returns every page according to that number ) the first page that shows when you click on profile is the Settings and I have a button for favourites in the navbar and I want to link it to the profile page in a way that shows the favourites page and not the settings when I click on it.我在一个网站上工作,我在这个个人资料页面中创建了一个个人资料页面,有按钮(设置、收藏夹、帖子)我把它做成一个多步骤表单,当你点击其中一个按钮时,它会显示 3 个按钮之一页面(每个按钮都有一个设置页码的 onClick 方法,并且 if 函数根据该编号返回每个页面)当您单击配置文件时显示的第一页是设置,我在导航栏中有一个收藏夹按钮,我想要以一种显示收藏夹页面而不是我单击它时的设置的方式将其链接到个人资料页面。 I apologize if my question isn't clear / understandable I'm still new to web development.如果我的问题不清楚/无法理解,我深表歉意,我还是 web 开发的新手。 Here's the code for the page display:下面是页面显示的代码:

const [page,setPage]=useState(0);
const FormText=["Reglages","Mes Annonces","Favoris"]
const PageDisplay =()=> {
    if (page === 0){
        return <Reglages/>;
    }
    else if (page === 1){
        return <Mesannces/>;
    }
    else if (page === 2){
        return <Favoris />;
    }

this is the code for the buttons:这是按钮的代码:

<Button onClick={()=>{setPage ((currentPage)=>currentPage=0);}} disabled={page===0}>Reglages</Button>
    <Button onClick={()=>{setPage ((currentPage)=>currentPage=1);}} disabled={page===1}>Mes Annonces()</Button>
    <Button onClick={()=>{setPage ((currentPage)=>currentPage=2);}} disabled={page===2}>Favoris</Button>
const [page, setPage] = useState(0)

//Where your will render, inside your div

<div>
{page === 0 ? < Reglages/> : page === 1 ? < Mesannces/> : page === 2 && < Favoris />
</div>

Buttons纽扣

<Button onClick={()=>setPage(0)} disabled={page===0}>Reglages</Button>
<Button onClick={()=>setPage(1)} disabled={page===1}>Mesannces</Button>
<Button onClick={()=>setPage(2)} disabled={page===2}>Favoris</Button>

    

I hope this helps我希望这有帮助

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM