XComponent React child does not load inside parent

[IvoPereira]

Hello!

I am having an issue to get my React content rendered inside an xcomponent. It looks like my child component, built in ReactJS, is rendered when run in webpack-dev-server or inside an iframe.

When called using xcomponent parent it doesn't seem to render. The component does render, the iframe is created and even the CSS is displayed, however the React itself does not render inside the child (strangely if I try an alert inside the component, it does get displayed, however the component never gets mounted).

I have included xcomponent in the parent and child as the documentation says.

What am I missing here?

Thanks

[IvoPereira]

I was able to find out that if directly passing window.xprops to my App component, the child component was rendered in xcomponent.

However, as I was using a react-router here, I am not really sure how to pass down window.xprops, so it would be injected into all my routes. I've tried passing down xprops to Routes component, but it seemed to cause the described issue.

Would you be able to provide an example on ReactJS with React-Router?

Thanks

[dchersey]

Hi, I had the same question -- here is what I got working:

import React from 'react';
import { Route, Switch, BrowserRouter } from 'react-router-dom';
import zoid from 'zoid';
import MyComponent from './MyComponent';

const MyZoidComponent = zoid.create({
  tag: 'my-tag',
  url: 'my-url'
});

function App(props) {
  return (
    <BrowserRouter>
      <Switch>
        <Route
          path="/mypath"
          render={router => (
            <MyComponent {...props} {...window.xprops} {...router} />
          )}
        />
... other routes
      </Switch>
    </BrowserRouter>
  );
}

export default App;

I did not need to reference zoid in MyComponent.js ... it has no idea it is being framed by zoid or in an iframe on another site.

This is also a better example in modern React.js of how to integrate zoid ... took me a while to translate the example code.