Я получил ошибку за использование React.useRef внутри компонента реагирующей функции - PullRequest
Новая
       45

Я получил ошибку за использование React.useRef внутри компонента реагирующей функции

1 голос
/ 02 марта 2020

Я использую React.useRef внутри реактивного функционального компонента, я получаю сообщение об ошибке, прежде чем я использовал его внутри компонента класса, и теперь я изменил его на реактивный функциональный компонент, и я все еще получаю это сообщение об ошибке ниже ,

React Hook "React.useRef" вызывается в функции "landingPage", которая не является ни компонентом функции React, ни пользовательской функцией React Hook

Не могли бы вы объяснить, почему я все еще получаю это сообщение после размещения в функциональном компоненте. Вот мой код 

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;

, а вот мой код в приложении. js 

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

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

1 Ответ

4 голосов
/ 02 марта 2020

Реактивные компоненты ДОЛЖНЫ начинаться с заглавной буквы. Измените это: 

function landingPage() {...

на это: 

function LandingPage() {...
...