Многократное использование компонента приводит к React не определенная ошибка - PullRequest
Новая
       16

Многократное использование компонента приводит к React не определенная ошибка

2 голосов
/ 22 марта 2019

В моем приложении отображается компонент карты. Когда у меня только одна карта, все нормально, как только у меня больше одной карты, я получаю ReferenceError: React is not defined

<div className="App">
  <Card />
  <Card />
</div>

Код компонента моей карты выглядит следующим образом (стилизация выполняется с помощью Emotion): 

/** @jsx jsx */

import React, { useRef } from "react";
import { css, jsx } from "@emotion/core";

import useComponentSize from "@rehooks/component-size";

function Card(props: any) {
  const ref = useRef(null);

  let size = useComponentSize(ref);
  let { width } = size;

  const style = css({
    display: "flex",
    flexDirection: width > 600 ? "row" : "column",
    "& div": {
      marginTop: 10,
      flex: 1
    },
    "& img": {
      objectFit: "cover",
      flex: 1
    },
    "& h2": {
      paddingLeft: 10,
      paddingRight: 10
    },
    "& p": {
      paddingLeft: 10,
      paddingRight: 10
    }
  });

  return (
    <div css={style} ref={ref}>
      <img src="ribena.webp" alt="" />
      <div>
        <h2>placeholder</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem
          molestiae, vitae esse et dignissimos consequuntur provident eligendi
          labore beatae laboriosam.
        </p>
      </div>
    </div>
  );
}

export default Card;

У меня NPM установил все необходимые зависимости и импортировал React как в компонент карты, так и в компонент приложения. Я не понимаю, почему это определяется, когда есть одна карта, а не когда есть две.

Я использую Typescript в проекте, если это имеет значение, со строгим режимом Typescript, установленным в false.

Единственный нестабильный выпуск, который я использую, это @ionic/react. Может быть, это является причиной проблемы? Или, может быть, это Typescript, так как Typescript часто вызывает странные проблемы в моем (ограниченном) опыте

Я воссоздал на codesandbox Ошибка периодически

enter image description here

Я использую пакет rehooks / component-size

...