我在 React 函数组件中使用 React.useRef 时出错

Question

我在 React 功能组件中使用 React.useRef，在 class 组件中使用它之前收到一条错误消息，现在我已将其更改为 React 功能组件并且我仍然在下面收到此错误消息。

React Hook "React.useRef" is called in function "landingPage" which is neither a React function component or a custom React Hook function

能否请您解释一下为什么我在放置功能组件后仍然收到此消息。这是我的代码

import React from "react";
import Modal from "./Modal";

function landingPage() {
  const modalRef = React.useRef();

  return (
    <div className="landingPage">
      <div className="container">
        <div className="landingPage__row">
          <div className="playvideo-wrapper">
            <div className="playvideo-text">See us in action</div>
            <div className="playvideo-button" onClick={openModal}>
              <p>Play Video</p>
            </div>
            <Modal ref={modalRef}>
              <iframe
                src="https://www.youtube.com/embed/SQ8CvT25_Dg?autoplay=1"
                frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen
              ></iframe>
            </Modal>
          </div>
        </div>
      </div>
    </div>
  );
}

export default landingPage;

这是我在 app.js

中的代码

import React, { Component } from "react";
import LandingPage from "./LandingPage";

export default class App extends Component {
  render() {
    return (
      <div className="main">
        <LandingPage />
      </div>
    );
  }
}

Answer 1

React 组件必须以大写字母开头。改变这个：

function landingPage() {...

对此：

function LandingPage() {...

我在 React 函数组件中使用 React.useRef 时出错

I got an error for using React.useRef inside a react function component

reactjs

react-hooks

use-ref