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

Question

我有两个组成部分的应用程序和标题。在Header中，我在App中有两个Calendar组件的按钮调用实例方法。如何在没有父组件的情况下将calendarRef传递到Calendar，因为我不能将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，请参阅钩子。

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组件中定义一个ref并将其传递给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;

码箱