Javascript 在React.js中跨文件函数更新状态值

我希望我的代码能够跨文件函数（App.js和startMenu.js）更新变量“currentPage”。目前，我可以只使用App.js来处理州，但我想简化我的代码，这样我就可以使用目录中的其他*.js文件。现在startMenu.js正在以App.toMainMenu和App.toLevelBuilder的形式从App.js调用，但它没有像我希望的那样更新状态变量“currentPage”onClick

App.js:

import React, {useState} from "react";
import startMenu from "./startMenu";
import levelBuilder from "./levelBuilder";

function App(){
  
  const[currentPage, setPage] = useState("start")

  function toMainMenu(){
    setPage(prevPage => "main")
  }

  function toLevelBuilder(){
    setPage(prevPage => "levels")
  }

  function renderSwitch(param) {
    switch(param) {
      case 'levels':
        return levelBuilder();
      default:
        return startMenu();
    }
  }

  return (
    <div >            
          <span>{currentPage}</span>
          {renderSwitch(currentPage)}            
    </div>
  )
  
}
export default App;

import React，{useState}来自“React”；
从“/startMenu”导入startMenu；
从“/levelBuilder”导入levelBuilder；
函数App（）{
常量[currentPage，setPage]=useState（“开始”）
函数toMainMenu（）{
设置页面（prevPage=>main）
}
函数toLevelBuilder（）{
设置页面（prevPage=>“级别”）
}
功能渲染器开关（参数）{
开关（参数）{
案例“级别”：
返回levelBuilder（）；
违约：
返回开始菜单（）；
}
}
返回(
{currentPage}
{renderSwitch（当前页面）}
)
}
导出默认应用程序；

startmenus.js

import React, {useState} from "react";
import levelBuilder from "./levelBuilder";
import App from "./App";

function startMenu() {
    return(
        <div className="container">      
            {/* start menu */}
            <img id = "scan_logo"src={process.env.PUBLIC_URL + '/scanlogo.png'} /> 
            <button id="menuStart" onClick={App.toMainMenu}> START </button>
            <button id="menuLevel" onClick={App.toLevelBuilder}> LEVEL BUILDER </button>        
        </div>
    )
}
export default startMenu;

import React，{useState}来自“React”；
从“/levelBuilder”导入levelBuilder；
从“/App”导入应用程序；
函数startMenu（）{
返回(
{/*开始菜单*/}
开始
标高生成器
)
}
导出默认开始菜单；

我想我需要使用道具，但作为React.js的初学者，这让我有点困惑。任何想法都将不胜感激

---

谢谢

如果我理解正确，您有两个页面，主菜单和级别生成器，您想切换渲染的是哪一个，对吗？最好的方法是使用react router dom库，在应用程序中创建路由，您可以找到更多关于它的信息

---

但是，如果您确实想使用普通的react状态来执行此操作，可以将函数

setPage（）

作为道具传递给其他两个组件，并从中调用它。这应该也能用。

如果我理解正确，您有两个页面，主菜单和标高生成器，您想切换渲染哪个页面，对吗？最好的方法是使用react router dom库，在应用程序中创建路由，您可以找到更多关于它的信息

---

但是，如果您确实想使用普通的react状态来执行此操作，可以将函数

setPage（）

作为道具传递给其他两个组件，并从中调用它。这也应该起作用。

使用功能组件。我在家里写了一个文本文件，所以它可能无法编译。但是，如果您希望从子函数组件调用父函数，这是一种方法

app.js

import React，{useState}来自“React”；
从“/StartMenu”导入StartMenu；
从“/LevelBuilder”导入LevelBuilder；
函数App（）{
常量[currentPage，setPage]=useState（“开始”）
函数toMainMenu（）{
设置页面（prevPage=>main）
}
函数toLevelBuilder（）{
设置页面（prevPage=>“级别”）
}
让jsx_元素=null；
开关（当前页）{
案例“级别”：
jsx_元素=；
打破
违约：
jsx_元素=；
}
返回(
{currentPage}
{jsx_元素}
)
}
导出默认应用程序；

StartMenu.js

从“React”导入React；
功能启动菜单（道具）{
返回(
开始
标高生成器
)
}
导出默认开始菜单；

使用功能组件。我在家里写了一个文本文件，所以它可能无法编译。但是，如果您希望从子函数组件调用父函数，这是一种方法

app.js

import React，{useState}来自“React”；
从“/StartMenu”导入StartMenu；
从“/LevelBuilder”导入LevelBuilder；
函数App（）{
常量[currentPage，setPage]=useState（“开始”）
函数toMainMenu（）{
设置页面（prevPage=>main）
}
函数toLevelBuilder（）{
设置页面（prevPage=>“级别”）
}
让jsx_元素=null；
开关（当前页）{
案例“级别”：
jsx_元素=；
打破
违约：
jsx_元素=；
}
返回(
{currentPage}
{jsx_元素}
)
}
导出默认应用程序；

StartMenu.js

从“React”导入React；
功能启动菜单（道具）{
返回(
开始
标高生成器
)
}
导出默认开始菜单；

首先是几个小提示：

• 组件名称（

  startmenus

  ，

  levelBuilder

  ）应使用Pascal大小写
• 通常情况下，状态变量和“set”函数名匹配，即

  currentPage

  和

  setCurrentPage

您最好的方法可能是将

setCurrentPage

从

传递到

。然后在

中，当用户单击按钮时，可以调用

setCurrentPage（“…”）

---

您可以做的另一件事（但这对您来说太过分了）是查看

useContext

前几个小提示：

• 组件名称（

  startmenus

  ，

  levelBuilder

  ）应使用Pascal大小写
• 通常情况下，状态变量和“set”函数名匹配，即

  currentPage

  和

  setCurrentPage

您最好的方法可能是将

setCurrentPage

从

传递到

。然后在

中，当用户单击按钮时，可以调用

setCurrentPage（“…”）

另一个

import React, {useState} from "react";
import StartMenu from "./StartMenu";
import LevelBuilder from "./LevelBuilder";

function App(){
    const [currentPage, setPage] = useState("start")

    function toMainMenu(){
        setPage(prevPage => "main")
    }

    function toLevelBuilder(){
        setPage(prevPage => "levels")
    }

    
    let jsx_element = null;

    switch(currentPage){
        case 'levels':
            jsx_element = <LevelBuilder/>;
            break;
        default:
            jsx_element = <StartMenu toMainMenu={toMainMenu} toLevelBuilder={toLevelBuilder}/>; 
    }

    return (
        <div>            
            <span>{currentPage}</span>
            {jsx_element}            
        </div>
    )

    }
export default App;

import React from "react";

function StartMenu(props) {
    return(
        <div className="container">
            <img id = "scan_logo"src={process.env.PUBLIC_URL + '/scanlogo.png'} /> 
            <button id="menuStart" onClick={props.toMainMenu}> START </button>
            <button id="menuLevel" onClick={props.toLevelBuilder}> LEVEL BUILDER </button>        
        </div>
    )
}
export default StartMenu;