Javascript 传递函数

仍在学习Java和函数。我在写一些代码，但被难住了

在我的App.js类中，return语句中有一行代码，如下所示：

<Toolbar drawerClickHandler ={props.drawerToggleClickHandler}/>

<DrawerToggleButton click={props.drawerClickHandler}/>

在我的工具栏类中，它将通过单击激活，如下所示：

<Toolbar drawerClickHandler ={props.drawerToggleClickHandler}/>

<DrawerToggleButton click={props.drawerClickHandler}/>

最后将连接到另一个类DroperToggleButton，代码如下：

<button className="toggle-button" onClick={props.click}>

未解析变量drawerToggleClickHandler表示，Toolbas类和DrawerToggleButton在传递时没有问题，但props.drawerToggleClickHandler不起作用

我怎样才能解决这个问题？完整代码如下：

App.js：

import React, { useState, useEffect } from "react";
// import logo from './logo.svg';
import './App.css';
import Routes from "./Routes";
import { Auth } from "aws-amplify";
import { Link, withRouter } from "react-router-dom";
// import { Navbar } from "react-bootstrap";
import  Toolbar from './components/Toolbar/Toolbar';
import SideDrawer from './components/SideDrawer/SideDrawer';
import Backdrop from './components/Backdrop/Backdrop';


function App(props) {
  const [isAuthenticated, userHasAuthenticated] = useState(false);
  const [isAuthenticating, setIsAuthenticating] = useState(true);
  const [sideDrawerOpen, setIsSideDrawerOpen] = useState(false);

  useEffect(() => {
    onLoad();
  }, []);

  async function onLoad() {
    try {
      await Auth.currentSession();
      userHasAuthenticated(true);
    }
    catch(e) {
      if (e !== 'No current user') {
        alert(e);
      }
    }
    setIsAuthenticating(false);
  }

  function handleLogout() {
    userHasAuthenticated(false);
    props.history.push("/login");
  }

  function drawerToggleClickHandler(){
    if(sideDrawerOpen){
      return {setIsSideDrawerOpen: false};
    }
    else{
      return {setIsSideDrawerOpen: true};
    }

  }

  let sideDrawer;
  let backdrop;
  let toolBar;

  if(userHasAuthenticated === true){
    toolBar = <Toolbar drawerClickHandler ={props.drawerToggleClickHandler}/>
  }
  if (userHasAuthenticated === true && sideDrawerOpen === true){
    sideDrawer = <SideDrawer/>;
    backdrop = <Backdrop/>
  }
  return (
    <div className="App container" style={{height: '100%'}}>
      {toolBar}
      {sideDrawer}
      {backdrop}
      {/*<Toolbar/>*/}
      {/*<SideDrawer/>*/}
      {/*<Backdrop/>*/}
      <Routes appProps={{ isAuthenticated, userHasAuthenticated }} />
    </div>
  );
}

export default withRouter(App);

Toolbar.js：

import React from 'react';
import './Toolbar.css';
import  DrawerToggleButton from '../SideDrawer/DrawerToggleButton'
import '../SideDrawer/DrawerToggleButton';
import sideDrawer from "../SideDrawer/SideDrawer";

const toolbar = props =>(
<header className="toolbar">
    <nav className="toolbar_navigation">
        <div>
            <DrawerToggleButton click={props.drawerClickHandler}/>
        </div>
        <div className="toolbar_logo"><a href="/">Kleen Portal</a></div>
        <div className="spacer" />
        <div className="toolbar_navigation-items">
            <ul>
                <li><a href="/">Logout</a></li>
            </ul>
        </div>
    </nav>
</header>
);

export default toolbar;

DroperToggleButton.js：

import React from 'react';
import './DrawerToggleButton.css'

const drawerToggleButton = props => (
  <button className="toggle-button" onClick={props.click}>
    <div className="toggle-button_line" />
    <div className="toggle-button_line" />
    <div className="toggle-button_line" />
  </button>
);

 export default drawerToggleButton;

---

您没有更改状态：您需要将函数更改为此，我建议将setState重命名为setissiedRawerOpen

改变

toolBar = <Toolbar drawerClickHandler ={props.drawerToggleClickHandler}/>

---

…

这不是java。Java与javascript非常不同。请删除此标记。代码中没有类。您可以在任何地方使用函数组件。const[SideDrawerRopen，setState]=useStatefalse；应为常量[SideDrawerRopen，SetSideDrawerRopen]=useStatefalse；，并返回{sidepaureropen:false}；应设置在抽屉式绳索上；您当前的代码没有更改状态我正在构建一个代码沙盒，试图找到错误，而您显然一直在错误地使用useState。模式为const[variable，setVariable]=useStateinitialValue；。要读取该值，只需在变量==x时执行；而setVariable，顾名思义，是一个用于更改它的函数。因此，在您的代码中，如果userHasAuthenticated===true，则会检查更改状态的函数是否为true，这显然是没有意义的。先学习标准反应，然后再进入酷酷的儿童反应谢谢你的帮助。我修好了。仍然在ToolBar.js中，当我这样做时：它显示未解析变量drawerClickHandlerSorry，提前点击回车按钮，编辑上面的注释。请看一看，并感谢您的帮助。更改了，但现在它说，未解析的变量DroperToggleClickHandler和函数DroperToggleClickHandler从未使用过。这些都在App.js中，所以我必须将App.js从函数组件转换为类，并将所有函数更改为方法，或者有更简单的方法来实现这一点吗？没有，但是现在您的代码已经更改了，您应该问一个不同的问题，因为很难看到更新的代码

<div className="App container" style={{height: '100%'}}>
{userHasAuthenticated && <Toolbar drawerClickHandler =props.drawerToggleClickHandler}/>
  }