Question

我目前正在研究一个学校项目，该项目主要用于HTML / CSS和一些javascript。但是，我们的顾问告诉我们要部分实施反应，因此我处于一种状态，我不知道自己在做什么，并且即将到期。

以下是我目前的情况。

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

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

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

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

我愿意接受所有修改，包括重组整个代码库。此外，如果对这种任务而言，执行实现不是可行的选择，那么如果您可以重定向到另一个框架来做到这一点，那就太好了！

任何人都将获得帮助！提前非常感谢您。

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：在通过道具的多个页面之间切换

3 个答案: