javascript - 使用 Create-React-App：在多个传递 props 的页面之间切换

问题描述

我目前正在做一个学校项目，我打算主要用 HTML/CSS 和一些 javascript 来做。但是，我们的顾问告诉我们要部分实施 React，所以我有点不知道自己在做什么，而且到期日即将到来。

以下是我现在所拥有的。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Page from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<Page />, document.getElementById('root'));
serviceWorker.unregister();

应用程序.js

class Page extends Component{
    constructor(props){
        super(props);
        this.state={
                page:"categories",
                loc: "Some Location",
                category: "Resources", //This is filled by user choice
                scenario: "Emergency" //This is filled by user choice
        };
        this.shiftPage = this.shiftPage.bind(this)
    }

    shiftPage(newPage) {
        this.setState({page: newPage}); 

    }

    render(){
        if (this.state.page === "scenario"){
            return(
                <Scenario page ={this.state.page} loc={this.state.loc} category={this.state.category} scenario={this.state.scenario} shiftPage={this.shiftPage}></Scenario> 
            );
        }
        else if(this.state.page === "categories"){
            return(
                <Categories page ={this.state.page} loc={this.state.loc} category={this.state.category} scenario={this.state.scenario} shiftPage={this.shiftPage}></Categories> 
            );
        }
        else if(this.state.page === "tips"){
            return(
                <Tips page ={this.state.page} loc={this.state.loc} category={this.state.category} scenario={this.state.scenario}></Tips>
            );
        }
        else if(this.state.page === "rights"){
            return(
                <Rights page ={this.state.page} loc={this.state.loc} category={this.state.category} scenario={this.state.scenario}></Rights>
            );
        }
        else{
            alert("Page Not Found.")
            return(
                <div>
                    <h1>Page Not Found</h1>
                        <p>The requested page does not exist. Please redirect to the <a href="../../welcome.html">Welcome</a> Page</p>
                </div>
            );
        }
    }
}
class Categories extends Component {
  render() {
    return ( //some html code...
        <button onClick={this.props.shiftPage("rights")}>
                    <div className = "category-box" id= "category-rights" >
                            <div className = "category-icon-container" id = "rights-container">
                                <img id = "rights-icon" src={require("./img/Laws.svg")} alt="Law Icon" height="37px" width="37px"></img>
                            </div>
                            <p>Rights</p>
                    </div>
        </button>
//Some HTML code...

基本上我要做的是让父类 Page 根据用户在前几页中的选择呈现不同的页面。到目前为止，我只this.page.state更新了，但我也打算更新其他状态。

到目前为止，这段代码的主要问题是，当我加载第一页时，我希望它加载页面categories，因为它最初是在 Page 类中设置的。但是，它会加载rights页面，尽管尚未单击该按钮。是否有可能有一个像这样的实现

页面渲染基于this.state.page
用户做出选择
this.state.page从基于子类的更新页面状态onClick
页面类重新呈现到新页面

我对任何和所有修改持开放态度，包括重组我的整个代码库。此外，如果 React 实现不是此类任务的可行选项，如果您可以重定向到另一个框架来执行此操作，那将是惊人的！

任何和所有的帮助都将得到满足！非常感谢你。

标签： javascriptreactjscreate-react-app

javascript - 使用 Create-React-App：在多个传递 props 的页面之间切换

问题描述

解决方案

推荐阅读