React组件间方法调用问题：如何从Navbar调用Sidebar的myMethod

开发者阿泽

2026-7-26

React组件间方法调用问题解决

问题根源

Sidebar组件内的myMethod是局部函数，仅在Sidebar内部可见，父组件App无法直接引用，所以你在App里传递myMethod会提示“未定义”。
App中导入Navbar时拼写错误：import Navbar from "./Nabar"; 应为./Navbar。
Navbar里的onClick被写在了<p>的文本内容中，不是标签属性，点击不会触发方法。

修正方案（状态提升）

将方法定义在共同的父组件App中，再通过props传递给需要调用的组件，这是React中组件间共享方法/状态的基础方式。

修正后的App.jsx

import Sidebar from "./Sidebar";
import Navbar from "./Navbar"; // 修正拼写错误

function App() {
  // 把方法定义在父组件中
  const myMethod = () => {
    alert("Hi!!! I am Collins");
  };

  return (
    <>
      <Sidebar />
      <Navbar myMethod={myMethod} />
    </>
  );
}

export default App;

修正后的Navbar.jsx

export default function Navbar(props) {
  return (
    <div>
      <p>This is a gibberish</p>
      {/* 将onClick作为p标签的属性，绑定方法 */}
      <p onClick={props.myMethod}>点击触发方法</p>
    </div>
  );
}

Sidebar.jsx（可选调整）

如果Sidebar也需要调用该方法，可通过props接收，否则保持原代码即可：

export default function Sidebar(props) {
  // 若需要调用myMethod，可解构props获取
  // const { myMethod } = props;

  return (
    <div>
      <p>I am feeling good</p>
      {/* 示例：<button onClick={myMethod}>触发方法</button> */}
    </div>
  );
}