app.js

Question

我希望我的代码跨文件函数（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;

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

我当时以为我需要使用道具，但是作为React.js初学者，这让我有些困惑。任何想法将不胜感激！

谢谢！

Answer 1

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

但是，如果您真的想使用普通反应状态来执行此操作，则可以将函数big_dist <- dist(big_df, method = "euclidean", diag = FALSE, upper = FALSE) pairlist_big <- subset(dist2list(as.dist(t(big_dist))), value <2) Error in t.default(dist) : long vectors not supported yet: ../../../../R-3.6.1/src/main/array.c:1556作为props传递给其他两个组件，然后从中调用它。这也应该起作用。

Answer 2

使用功能组件。我是在一个文本文件上在家中编写的，因此它可能无法编译，但是如果您希望从子功能组件中调用父函数，这就是一种方法。

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")
    }

    
    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;

StartMenu.js

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;

Answer 3

首先是一些小指针：

您的组件名称（startMenu，levelBuilder）应使用Pascal Case
状态变量和“ set”函数名称（即currentPage和setCurrentPage）相匹配是一种常见的做法

您最好的方法可能是将setCurrentPage的{{1}}传递到<StartMenu />。然后，在<App />中，当用户单击按钮时，您可以调用<StartMenu />。

您可以做的另一件事（但对您来说太过分了）是调查setCurrentPage('...')。

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

3 个答案:

app.js

StartMenu.js