So let's say I have a ponent called ImageGrid and it is defined as below:

window.ImageGrid = React.createClass({
    render: function() {
        return (
            <div className="image-grid">
                <ImageGridItem />
            </div>
        );
    }
});

As you can see it includes a child react ponent called ImageGridItem. Which is defined below.

window.ImageGridItem = React.createClass({
    render: function() {
        return (
            <div className="item-container">something</div>
        );
    }
});

This works fine as long as both are directly properties of window. But this is kind of horrible so I'd like to group up all my react ponents under a namespace of window.myComponents for example.

So the definitions change to:

window.myComponents.ImageGrid     = React.createClass({...});
window.myComponents.ImageGridItem = React.createClass({...});

The problem now is that as ImageGrid refers to <ImageGridItem /> in it's render() function, the JS version of this gets piled out to JS as ImageGridItem() which of course is undefined since it's now actually myComponents.ImageGridItem() and react plains it can't find it.

Yes I realise I can just not write JSX for that ponent include and manually do myComponents.ImageGridItem({attr: 'val'}) but I'd really prefer to use the JSX html syntax shortcut as it's much easier to read and develop with.

Are there any ways to get this to work while still using the <ImageGridItem /> syntax for children? And if not is it possible to define the JS namespace within the JSX?

So let's say I have a ponent called ImageGrid and it is defined as below:

window.ImageGrid = React.createClass({
    render: function() {
        return (
            <div className="image-grid">
                <ImageGridItem />
            </div>
        );
    }
});

As you can see it includes a child react ponent called ImageGridItem. Which is defined below.

window.ImageGridItem = React.createClass({
    render: function() {
        return (
            <div className="item-container">something</div>
        );
    }
});

This works fine as long as both are directly properties of window. But this is kind of horrible so I'd like to group up all my react ponents under a namespace of window.myComponents for example.

So the definitions change to:

window.myComponents.ImageGrid     = React.createClass({...});
window.myComponents.ImageGridItem = React.createClass({...});

The problem now is that as ImageGrid refers to <ImageGridItem /> in it's render() function, the JS version of this gets piled out to JS as ImageGridItem() which of course is undefined since it's now actually myComponents.ImageGridItem() and react plains it can't find it.

Yes I realise I can just not write JSX for that ponent include and manually do myComponents.ImageGridItem({attr: 'val'}) but I'd really prefer to use the JSX html syntax shortcut as it's much easier to read and develop with.

Are there any ways to get this to work while still using the <ImageGridItem /> syntax for children? And if not is it possible to define the JS namespace within the JSX?

• javascript
• reactjs

Share Improve this question Follow edited Jun 5, 2014 at 20:00 Mike Driver asked May 14, 2014 at 11:36 Mike DriverMike Driver 8,51133 gold badges3737 silver badges3737 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

This pull request was just merged:

https://github./facebook/react/pull/760

It allows you to write things like <myComponents.ImageGridItem /> in React 0.11 and newer.

That said, a proper module system is the remended way to manage dependencies to avoid pulling in code that you don't need.

Currently, there isn't a way to do this. Namespacing with JSX is on the todo list.

Most people use some kind of module system (browserify, webpack, requirejs), which replace namespacing and allow ponents to be used easily. There are a lot of other benefits, so I very much remend looking into it.