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

Question

我有两个部分的App和Header。在页眉中，我在App中有两个Calendar组件的按钮调用实例方法。如何在没有父组件的情况下将calendarRef传递到日历中，因为我无法合并Header和App。我尝试使用上下文，但我认为这没有必要吗？

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>
  );
};

这是我的代码。

Answer 1

您尚未声明ref并将其传递给HeaderComponent，请参见useRef hook。

const App = () => {
  const calendarRef = useRef();

  React.useEffect(() => {
    console.log(calendarRef.current);
  }, []);

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

// HeaderComponent
function HeaderComponent({ calendarRef }) {
  const handleNext = () => {
    const calendarInstance = calendarRef.current.getInstance();
    calendarInstance.next();
  };
  return ...
}

Answer 2

您应该在App组件中定义一个引用，并将其传递给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;

Codesandbox