web-dev-qa-db-ja.com

名前付きインポートReact

この行の内容：

import React, { Component } from "react";

中括弧がコンポーネントの周りにのみあり、「React」にもないのはなぜですか？

javascriptreactjsecmascript-6import
4
kambi

これは素晴らしい答えです ES6のデフォルトおよび名前付きインポートについて説明しています

インポートしたいFooという名前のクラスがあるとしましょう。デフォルトのエクスポートを取得したい場合は、次のようにします。

import Foo from './foo.js';

Fooファイル内に特定の関数が必要な場合は、中括弧を使用します。

import { fooFunction } from './foo.js';

これはReact機能ではなく、ES6であることに注意してください。おそらく、babelを使用してコードをES6からES5にトランスパイルしています。

2
Nathan

反応で似たようなものを作成します。次の例を見てみましょう。

someobject.js

const someobject = {
   somefunc1: ()=>console.log("hello 1"),
   somefunc2: ()=>console.log("hello 2")
}

export default someobject;

app.js

import someobject, { somefunc1, somefunc2 } from "./someobject";

someobject.somefunc1(); //hello 1
someobject.somefunc2(); //hello 2
somefunc1(); //hello 1
somefunc2(); //hello 2

輸出のデフォルト

1
kemicofa ghost

Import reactはデフォルトのreactパッケージをインポートし、中括弧付きのコンポーネントはReactパッケージの特定の要素を指定します。Reactは、デフォルトでは中括弧は必要ありません。デフォルトのインポートパッケージ。

import React, { Component } from "react";

お役に立てれば

0
Ben Swindells

Reactモジュールデフォルトのエクスポート はReactオブジェクトであり、 名前付きエクスポート）もありますComponent1、 このようなもの：

// assuming React and Component are predefined
export default React
export Component

偶然にもComponentはReactオブジェクトでも利用できるので、個別にインポートする必要はありませんが、あなたのアプローチを好む人もいます。たとえば、これは可能です。

// MyComponent.js
import React from 'react'

class MyComponent extends React.Component {}

ES6モジュール構文の詳細については、 ここ を参照してください。

1 実際には、Reactライブラリには、上記の例のように名前付きエクスポートComponentがありませんが、Componentは デフォルトのプロパティ）であることに注意してください。 export したがって、ES6パッケージがBabelによってトランスパイルされる方法により、これは名前付きエクスポートになり、動作は上記の例のようになります。

0
sdgluck

これは、reactライブラリのデフォルトのエクスポートモジュールがReactであり、他の多くのコンポーネントをエクスポートできる場合でも、デフォルトのエクスポートは1つしか存在できないためですが、デフォルトにできるのは1つだけです。その後、Reactライブラリの他のコンポーネントを分解できます。

0
Victor Bala

Reactはさまざまなメソッドを含むモジュールです。React Wordを使用する場合は、モジュール全体をインポートするため、React.Component（この場合はドット表記でメソッド内のメソッドを参照）を使用できます。モジュール）。

では、メソッドをインポートする必要がある場合はどうでしょうか。中かっこを使用します、なぜですか？ 1つのモジュール内の多くのメソッド間でメソッドをインポートするため、増減できるため、1つのクラスまたは1つのモジュール内のメソッドである{a、b、c、r、w、q}をインポートできます。使用している場合

import {Component} from 'react';

これで、react.componentのようにドット参照なしでComponentWordを直接使用できます。

したがって、Reactモジュールはデフォルトでエクスポートされます。ここでは、すべてのReactモジュールが必要です。これをすべてのメソッドで使用します。ここでは、{Component}を名前でエクスポートします。 Reactライブラリから特定のメソッドが必要ですすべてがreactライブラリではありません

そしてそれもチェックしてください ES6インポートに中括弧を使用する必要があるのはいつですか？

0
Moumen Soliman