Импортные заявления: с или без Реагирования?

Там немного обсуждается, нужно ли импортировать React в компонентах без состояния и я не могу найти никаких документов об этом. Итак:

//OPTION 1
import React, { PropTypes } from 'react';

//OPTION 2
import { PropTypes } from 'react';

export const Button = ({ action }) => {
  return (
    <button onClick={action}>Submit</button>
  );
}

Button.propTypes = {
  action: PropTypes.func.isRequired,
};

Некоторые говорят, что вариант 1 - лучшая практика при использовании JSX; какой-либо другой компонент мысли не работает с вариантом 2.

Я пробовал оба, и я не вижу никакой разницы, компонент все еще работает в обоих случаях.

Вариант 1 или Вариант 2: какой из них правильный?

Ответы

Ответ 1

Используйте параметр 1, потому что babel преобразует ваш jsx
<button onClick={action}>Submit</button>
для изображения React.createElement("button", { onClick: action }, "Submit");

Итак, как вы видите, реакция должна быть в области. У вас есть два варианта:

  • import React from 'react';
  • или определить глобальное решение

Ответ 2

Это зависит от того, как вы создаете свои файлы. Если вы используете модуль-пучок, например webpack, и нет понятия глобального модуля React, тогда выключение React вызовет ошибку React is not defined.

Это потому, что это:

let C = <div />

превращается в:

let C = React.createElement("div", null)

Таким образом, внутри этого конкретного модуля. React не импортируется и поэтому отключается в переменной undefined.

Вы можете открыть React в пространстве имен окна, тогда вам не нужно импортировать его в каждый файл. Это вам.