I have used this approach quite often when I was earliest stage of learning React.
Here's how I did:
export const Sidebar = (props) => { ... }
export const SidebarLink = (props) => { ... }
And when we needed to use them:
import * as Sidebar from '...' // path to the exports
...
...
...
But it looks a little uglier in your case. Here's what I'd have used this approach: (Just an example)
When I used this approach exactly?
I used this approach whenever I need to use several components:
// ComponentOne.js
export const ComponentOne = () => {}
// ComponentTwo.js
export const ComponentTwo = () => {}
// ComponentThree.js
export const ComponentThree = () => {}
// ...
// ComponentIndex.js
export { ComponentOne } from 'ComponentOne'
export { ComponentTwo } from 'ComponentTwo'
// ...
And now using it in separate component. So, it's be better to import all rather than using import statement a huge number of lines:
import * as ComponentAll from 'ComponentIndex'
...
But obviously, there's one big con while using this approach, this will impact on performance. Continue reading below to see it why:
You'll be importing all of the components even though, you'll not be using some component. For eg.:
// PlaceOne.js
// PlaceTwo.js
So, you're importing all exported components in the PlaceOne.js and PlaceTwo.js.
To avoid this con, use import statement like:
import {
ComponentOne,
ComponentTwo,
// ... import only required component
} from 'ComponentIndex'
// Now, you can simply use:
This concludes that using rather than is better approach. And also, we will not loose code splitting advantage while using approach.
