Most components are mounted out of context in the React devtools

[darkyen]

The above is a screenshot when React Inspector was used in chrome devtools, I'd expect the above to look like

<SplitView>
    <Pane>...</Pane>
    <Content>
        <AppCanvas>
           <Locations>
              <Location>
                  <Pivot>
                    <Pivot.Item> 
                       <h1>Hello World</h1>
                    </Pivot.Item>
                  </Pivot>
              </Location
           </Locations>
        </AppCanvas>
    </Content>
</SplitView>

I wonder why most things are uprooted and rendered on top level instead of the react way ?

[rigdern]

This occurs whenever a ReactWinJS component calls React.render. Whenever a component does this, the content it's rendering ends up appearing at the root of the React inspector.

There are a couple of things to investigate for fixing this:

1. Is there a way to implement ReactWinJS components without calling React.render?
2. Will React portals help? Nested Render Trees facebook/react#3210

ReactWinJS components call React.render because they are wrapping WinJS controls which manipulate the DOM directly and are not React components. Whenever a WinJS control can host app content (e.g. ContentDialog, SplitView, Hub, Pivot), the ReactWinJS component will call React.render to enable you to express the hosted content as a React component.

Thanks for the report.

[darkyen]

@rigdern I wrote a smaller binding for winjs with react before we switched to this, init i used to render the winjs components onComponentMounted by calling the constructor and passing the element directly getting it from react, and let winjs handle that task.

Can that approach not be used ?

[rigdern]

@darkyen I believe we are using the approach you described:

• componentDidMount
• Constructor call within initWinJSComponent

The problem occurs when a WinJS control hosts HTML content and you want to describe that content as a React component. For example, how would you implement the SplitView component such that you can describe the pane as a React component?

Our current implementation will construct the SplitView using the method you described. However, it'll call React.render on the pane component to render it within the SplitView and the pane will end up appearing outside of the SplitView in the React debug tools.

[darkyen]

oh okay, i understand the exact cause now.

#Hacky way i made it work (for a completely different reason)
How i did it was to use a hidden node (display: none;) as a wrapper and create 2 copies of the element then write custom code so that split view actually had <SideView> and <ContentView> seperately basically my version was more close to react-art or react-canvas rather than react itself, it used react solely for the purpose of creating elements in winjs