Florian Bienefelt Florian Bienefelt - 9 months ago 90
React JSX Question

Export multiple wrapper functions in Javascript ES6

I'm using react-komposer to wrap React components with a data fetching wrapper.

It is very basic and I'd want to wrap multiple components in Meteor. But I can't figure out what the export pattern is?

Here is what I have (and gives me an "Unexpected Token" error - probably obvious if you understand this well!):

// myContainer.jsx
function composer(props, onData) {
if (Meteor.subscribe('SingleTodoLists').ready()) {
const todoList = todoLists.find({}).fetch();
onData(null, { todoList });

export composeWithTracker(composer, Loading)(Component1);
export composeWithTracker(composer, Loading)(Component2);

And I'd like to import them like this:

import { Component1, Component2 } from './myContainer.jsx';

This wrapper syntax is not really clear for me, so I'm unsure about what to try. Playing with export default and other variations yielded no result so far.

Answer Source

If you don't use default exports, you need to name the things you export:

export const TrackedComponent1 = composeWithTracker(composer, Loading)(Component1);
export const TrackedComponent2 = composeWithTracker(composer, Loading)(Component2);

If you use default export instead you can omit the name, e.g.

export default composeWithTracker(composer, Loading)(Component1);

But you can only define one default export per module

See the documentation for the ES6 export syntax: https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export