React中从Navbar组件调用App类方法及切换中间组件问题

第一步：让Navbar能调用App里的getClick方法 #

你已经把getClick作为props传给了Navbar，但Navbar是函数组件，没接收props，所以先做以下修改：

1. 让Navbar接收props参数：

const Navbar = (props) => { // 这里添加props参数
  ...
  return (
    ...
    {/* 注意React事件是驼峰写法onClick，不是onclick */}
    <div ... onClick={() => props.getClick()}>
      ...
    </div>
  );
}

这样点击这个div时，就能触发App里的getClick方法，控制台会打印'test'。

第二步：实现组件切换的最终目标 #

用state维护组件状态是更合理的方案，我们通过App控制状态，动态切换中间显示的组件：

修改App.jsx：

• 新增切换组件的方法，用来更新状态
• 根据状态值渲染对应的组件

import React, {} from "react";
import { Navbar, Home, Footer, Documentation } from "./components";

class App extends React.Component  {

  constructor(props)
  {
    super(props);
    this.state = { mainComponent: 'Home' };
  }

  // 新增切换组件的方法，接收组件名称作为参数
  handleSwitchComponent = (componentName) => {
    this.setState({ mainComponent: componentName });
  }

  render() {
    // 根据当前状态确定要渲染的组件
    let MainContent;
    switch(this.state.mainComponent) {
      case 'Home':
        MainContent = <Home/>;
        break;
      case 'Documentation':
        MainContent = <Documentation/>;
        break;
      // 后续新增组件可以在这里加对应的case
      default:
        MainContent = <Home/>;
    }

    return (
      <div className="min-h-screen gradient-bg-welcome">
        {/* 把切换方法传给Navbar */}
        <Navbar switchComponent={this.handleSwitchComponent}/>
        {/* 渲染动态切换的内容 */}
        {MainContent}
        <Footer/>
      </div>
    ); 
  }
}

export default App;

修改Navbar.jsx：

• 在点击事件里调用传过来的switchComponent方法，传入要切换的组件名称

const Navbar = (props) => {
  ...
  return (
    <nav>
      {/* 点击切换到Home组件 */}
      <div onClick={() => props.switchComponent('Home')}>Home</div>
      {/* 点击切换到Documentation组件 */}
      <div onClick={() => props.switchComponent('Documentation')}>Documentation</div>
    </nav>
  );
}

export default Navbar;

现在点击Navbar里的不同选项，就能切换中间显示的组件了。

内容的提问来源于stack exchange，提问作者Swerfer