在React中将函数传递给Component

Question

您之前对类似问题的回答对我没有帮助。

我有App组件：

import React from "react";
import Header from "./components/Header";
import Menu from "./components/Menu";
import Board from "./components/Board";

class App extends React.Component {
  constructor() {
  super();
  this.onButtonClick = this.onButtonClick.bind(this);
  this.state = {
    condition: true
  };
}

onButtonClick() {
  console.log("clicked...");
  this.setState({
    condition: !this.state.condition
  });
}
render() {
  return (
    <div className="App">
      <Header />
      <Menu condition={this.state.condition} />
      <Board />
    </div>
  );
 }
}

export default App;

MenuIcon组件：

  import React from "react";
  import "../css/main.css";

  class MenuIcon extends React.Component {
    render() {
      return (
        <div className="Menu_icon" onClick={this.props.onButtonClick}>
          <div className="Menu_icon_element" />
          <div className="Menu_icon_element" />
          <div className="Menu_icon_element" />
        </div>
      );
    }
  }

  export default MenuIcon;

和Menu组件

import React from "react";
import "../css/main.css";

class Menu extends React.Component {
  render() {
    return (
      <div className={this.props.condition ? "Menu inactive" : "Menu active"}>
        <ul>
          <li>Notes</li>
          <li>Erinnerungen</li>
        </ul>
      </div>
    );
  }
}

export default Menu;
import React from "react";
import "../css/main.css";

class Menu extends React.Component {
  render() {
    return (
      <div className={this.props.condition ? "Menu inactive" : "Menu active"}>
        <ul>
          <li>Notes</li>
          <li>Erinnerungen</li>
        </ul>
      </div>
    );
  }
}

export default Menu;

和标题组件

import React from "react";
import "../css/main.css";
import MenuIcon from "./MenuIcon";

class Header extends React.Component {
  render() {
    return (
      <div className="Header_container">
        <MenuIcon onButtonClick={this.props.onButtonClick} />
        <div className="Header_headline">Notes</div>
      </div>
    );
  }
}

export default Header;

每次点击onButtonClick时，我都想触发 App.js 中定义的MenuIcon。然后Menu应该淡入或淡出。动画是用css完成的。

我没有发现我的错误？

有人可以帮帮我吗？