インポートステートメント：反応の有無

Question

ステートレスなコンポーネントに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, 
}; 

JSXを使用する場合、オプション1がベストプラクティスであると言う人もいます。オプション2で他の思考コンポーネントが失敗することがあります。

私は両方を試しましたが、違いは見えません。コンポーネントはどちらの場合でも動作します。

オプション1またはオプション2：どれが正しいですか？

Answer 1

使用オプション1バベルはあなたがスコープ内にある必要があります反応する参照よう
React.createElement("button", { onClick: action }, "Submit");

にごJSX
<button onClick={action}>Submit</button>
を変換しますので。次の2つのオプションがあります。

1. インポート 'React'から 'React';
2. または定義するには、グローバル

Answer 2

ファイルの作成方法によって異なります。 webpackのようなモジュールバンドラを使用していて、グローバルReactモジュールの概念がない場合、Reactを省略すると、エラーReact is not definedがスローされます。

このためです。だから、特定のモジュール内... Reactがインポートされていないため、未定義の変数にトリップします

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

：

let C = <div /> 

がに変わります。

Reactをウィンドウの名前空間に公開すると、すべてのファイルにインポートする必要はありません。それはあなた次第です。