{"action":"opened","issue":{"url":"https://api.github.com/repos/pilwon/react-famous/issues/19","labels_url":"https://api.github.com/repos/pilwon/react-famous/issues/19/labels{/name}","comments_url":"https://api.github.com/repos/pilwon/react-famous/issues/19/comments","events_url":"https://api.github.com/repos/pilwon/react-famous/issues/19/events","html_url":"https://github.com/pilwon/react-famous/issues/19","id":99484200,"number":19,"title":"[idea] Better composability.","user":{"login":"trusktr","id":297678,"avatar_url":"https://avatars.githubusercontent.com/u/297678?v=3","gravatar_id":"","url":"https://api.github.com/users/trusktr","html_url":"https://github.com/trusktr","followers_url":"https://api.github.com/users/trusktr/followers","following_url":"https://api.github.com/users/trusktr/following{/other_user}","gists_url":"https://api.github.com/users/trusktr/gists{/gist_id}","starred_url":"https://api.github.com/users/trusktr/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/trusktr/subscriptions","organizations_url":"https://api.github.com/users/trusktr/orgs","repos_url":"https://api.github.com/users/trusktr/repos","events_url":"https://api.github.com/users/trusktr/events{/privacy}","received_events_url":"https://api.github.com/users/trusktr/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-08-06T17:13:54Z","updated_at":"2015-08-06T17:13:54Z","closed_at":null,"body":"Alright, so I've adopted react-famous into my latest project (finally!). It's working great out of the box composing things like `Scene`, `Node`, and `DOMElement` together (using those components directly).\r\n\r\nBut now what I'm trying to do is get more organized, so I've got something like this:\r\n\r\n```jsx\r\n    React.render(\r\n        <Scene style={{width: '100%', height: '100%'}}>\r\n            <FeatureMapView boardId={board._id}>\r\n                {_.map(cards, card =>\r\n                   <Card context={card} />\r\n                )}\r\n            </FeatureMapView>\r\n        </Scene>,\r\n        this.$('.board-container')[0]\r\n    )\r\n```\r\n\r\nwhere `FeatureMapView` extends `Node`,\r\n\r\n```jsx\r\nimport Node             from 'react-famous/Node'\r\n\r\nclass FeatureMapView extends Node {\r\n    ...\r\n}\r\n```\r\n\r\nand the `Card` component contains a `Node` and `DOMElement` instead of extending any of them:\r\n\r\n```jsx\r\nclass Card extends React.Component {\r\n\r\n    render() {\r\n        let card = this.props.context\r\n        return (\r\n            <Node>\r\n                <DOMElement>\r\n                    <BlazeCardWrapper context={card} />\r\n                </DOMElement>\r\n            </Node>\r\n        )\r\n    }\r\n}\r\n```\r\n\r\n. The `BlazeCardWrapper` component just renders some normal HTML in the `DOMElement`.\r\n\r\nThe problem is, now that I've wrapped `Node` and `DOMElement` inside of my `Card` class, they don't become part of the scene graph as I was hoping. I was hoping for this scene graph hierarchy:\r\n\r\n```js\r\nScene\r\n  FeatureMapView // (extends Node)\r\n    Node // wrapped by Card, has DOMElement content\r\n```\r\n\r\nIt would be great if we could allow for things to be wrapped/owned by other components in order to have more control of the scene graph composition.\r\n\r\nAny ideas @pilwon?"}}