Reactjs 如何在另一个组件中使用组件的React.useRef（）？

我有两个组件的应用程序和标题。在Header中，我有两个按钮调用实例，它们是应用程序中日历组件的方法。如果没有父组件，我如何将

calendarRef

传递到日历中，因为我无法组合

标题

和

应用程序

。我试过上下文，但我觉得没必要

import * as React from "react";
import { useRef } from "react";
import "./styles.css";
import Calendar from "@toast-ui/react-calendar";
import "tui-calendar/dist/tui-calendar.css";
import HeaderComponent from "./Header";

const App = () => {
  return (
    <div className="App">
      <HeaderComponent />
      <Calendar ref={calendarRef} height="100vh" />
    </div>
  );
};

import*as React from“React”；
从“react”导入{useRef}；
导入“/styles.css”；
从“@toast ui/react Calendar”导入日历；
导入“tui calendar/dist/tui calendar.css”；
从“/Header”导入HeaderComponent；
常量应用=（）=>{
返回(
);
};

---

这是我的代码。

您尚未声明

ref

并将其传递给

HeaderComponent

，请参阅

const-App=（）=>{
const calendarRef=useRef（）；
React.useffect（（）=>{
console.log（calendarRef.current）；
}, []);
返回(
);
};
//头部组件
函数头组件（{calendarRef}）{
常量handleNext=（）=>{
const calendarInstance=calendarRef.current.getInstance（）；
calendarInstance.next（）；
};
返回。。。
}

---

您应该在应用程序组件中定义一个ref，并将其传递给HeaderComponent

const App = () => {
  let calendarRef = useRef();
  return (
    <div className="App">
      <HeaderComponent calendarRef={calendarRef} />
      <Calendar ref={calendarRef} height="100vh" />
    </div>
  );
};

export default App;

const-App=（）=>{
设calendarRef=useRef（）；
返回(
);
};
导出默认应用程序；

---

函数头组件（{calendarRef}）{
让handleNext=（）=>{
让calendarInstance=calendarRef.current.getInstance（）；
calendarInstance.next（）；
};
返回(
上
下一个
);
}
导出默认HeaderComponent；

---

我的代码只是复制品。在我的项目中，日历组件和标题组件不在同一个位置。我该怎么做？没有人猜不到你的项目是如何结构的，我们回答你的问题，试着问一个更具体的问题，你在哪里复制结构。

const App = () => {
  let calendarRef = useRef();
  return (
    <div className="App">
      <HeaderComponent calendarRef={calendarRef} />
      <Calendar ref={calendarRef} height="100vh" />
    </div>
  );
};

export default App;

function HeaderComponent({ calendarRef }) {
  let handleNext = () => {
    let calendarInstance = calendarRef.current.getInstance();

    calendarInstance.next();
  };

  return (
    <div>
      <button>Prev</button>
      <button onClick={handleNext}>Next</button>
    </div>
  );
}

export default HeaderComponent;