CODEWITHSUNDEEP
javascriptreactjsimportecmascript-6
zmii
zmii

Reputation: 4277

Combining multiple import structures in ES6

In my application I frequently import React.js as this

import * as React from 'react'

but there are classes, where I heavily use some nested Objects/or methods of nested objects like React.Children.toArray.

I want to eliminate duplication as much as possible, thus want to import Children from react module, or better Children.toArray, but still need all React to be imported in order for JSX to work.

Is there some way like this pseudocode:

import * as React, {Children: {toArray}} from 'react'

Specification suggests that it's not possible: http://www.ecma-international.org/ecma-262/6.0/#sec-imports

ImportClause :

...

ImportedDefaultBinding , NameSpaceImport

ImportedDefaultBinding , NamedImports

Upvotes: 3

Views: 733

Answers (2)

Yasser Hussain
Yasser Hussain

Reputation: 854

I think this is the best you can do.

import React, {Children} from 'react';

const {toArray} = Children;

Upvotes: 1

Sagiv b.g
Sagiv b.g

Reputation: 31024

Named imports can not be destructured, it looks the same as the destructure pattern but it is not.

You will likely get the error:

ES2015 named imports do not destructure. Use another statement for destructuring after the import.

This leaves us with the option of something like:

import foo, { bar } from 'module';

const { nested } = bar;

Upvotes: 0

Related Questions