Функция стрелки не распознается. - PullRequest
Новая
       99

Функция стрелки не распознается.

0 голосов
/ 06 августа 2020 

import React, {
  useState
} from 'react';
import Modal from 'react-modal';
import './testmodal.css';


class Testmodal extends React.Component {
  render() {
    const [modalIsOpen, setModalIsOpen] = useState(false)
    return ( <
      div className = "Testmodal" >
      <
      div >
      <
      button onClick {
        () => setModalIsOpen(true)
      } > Edit Profile < /button> <
      /div> <
      Modal isOpen = {
        modalIsOpen
      } >
      <
      h2 > Modal Type < /h2> <
      p > Modal body < /p> <
      div >
      <
      button onClick = {
        () => setModalIsOpen(false)
      } > < /button> <
      /div> <
      /Modal> <
      /div>
    )
  }
}

export default Testmodal;

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

Ошибка анализа: неожиданный токен, ожидалось "..." с красной стрелкой, указывающей на скобки моей функции стрелки

1 Ответ

1 голос
/ 06 августа 2020

Добро пожаловать в StackOverflow!

Ваша проблема заключается в использовании компонента класса React с hooks.

Hooks предназначены для использования с функциональные компоненты (Взгляните на первый пример).

Компоненты класса включают использование this.state, в то время как функциональные компоненты включают использование useState, useX, useY (хуки), как и вы.

Взгляните на этот фиксированный код: 

import React, { useState } from 'react';
import Modal from 'react-modal';
import './testmodal.css';

const Testmodal = () => {
  const [modalIsOpen, setModalIsOpen] = useState(false);

  return (
    <div className="Testmodal">
      <div>
        <button onClick={() => setModalIsOpen(true)}> Edit Profile </button>
      </div>
      <Modal isOpen={modalIsOpen}>
        <h2> Modal Type </h2> <p> Modal body </p>
        <div>
          <button onClick={() => setModalIsOpen(false)}> </button>
        </div>
      </Modal>
    </div>
  );
};

export default Testmodal;

Я изменил перенос компонента с Class Testmodal extends React.Component на const Testmodal = () => {...}

Это называется переходом от компонента класса к функциональному компоненту. .

После того, как компонент заработает, вы можете использовать внутри него хуки, но не забудьте использовать его только в наивысшей области .

...