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

Question

我目前正在做一个学校项目，我打算主要用 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();

App.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...

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

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

这样的实现

页面呈现基于 this.state.page
用户做出选择
从基于 onClick

this.state.page

页面 class 重新呈现到新页面

我愿意接受任何和所有修改，包括重构我的整个代码库。此外，如果 React 实现不是此类任务的可行选择，如果您可以重定向到另一个框架来这样做，那就太棒了！

我们将不胜感激任何帮助！提前谢谢你。

Answer 1

发生这种情况是因为使用了

<button onClick={this.props.shiftPage("rights")}>

这是一个函数调用，意味着函数将在 render 上调用。

要更正此问题并仅在单击时调用该函数，您需要折射到：

<button onClick={()=>this.props.shiftPage("rights")}>

Answer 2

您要实现的功能称为路由。要解决这个问题，可以使用 react-router 库。 https://reacttraining.com/react-router/web/guides/quick-start

Answer 3

app.js

import React from 'react';
import { Helmet } from 'react-helmet';
import styled from 'styled-components';
import { Switch, Route, } from 'react-router-dom';

import Scenario from '../Scenario'
import Categories from '../Categories'
import Tips from '../Tips'
import Rights from '../Rights'

const AppWrapper = styled.div`
  min-height: 100%;
`;

export default function App() {
  return (
    <AppWrapper>
       <Helmet titleTemplate="Admin" defaultTitle="Apex Sales 
        Portal">
         <meta name="description" content="Apex Sales Portal" />
       </Helmet>
       <Switch>
         <Route path="/scenario" component={Scenario} exact />
         <Route path="/categories" component={Categories} exact />
         <Route path="/tips" component={Tips} exact />
         <Route path="/rights" component={Rights} exact />
       </Switch>   
    </AppWrapper>
  );
}

index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom'
import App from "../src/containers/App";
import registerServiceWorker from "./registerServiceWorker";

ReactDOM.render(
    <BrowserRouter>
      <App/>
    </BrowserRouter>,
   document.getElementById("root")
);

registerServiceWorker();

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

Using Create-React-App: Switching through multiple pages which passes props

javascript

reactjs

create-react-app