React in Vue: pass react component as attribute to another component

[RaimisJ]

Hi,

I have just found this and it seems very promising. I am using React in Vue. However, I have ran into an issue: how can I pass react component as an attribute in another component. E.g. <component1 attr={<component2 />}></component1> in Vue. Is this even possible?

[akxcv]

Hi, can you describe your use case in a little more detail? If you just need a class/function to instantiate a component, you can do: <component1 attr={component2} />

[RaimisJ]

Here is an example of React component I am trying to translate to Vue: ` render() { return ( <Page navigation={

Example Navigation

    }
  >
  </Page>
)

Lets say I have these two components imported to Vue, if I specify` it does not work.

[RaimisJ]

Anyway, to solve this I can just create a wrapper React component that mutates this component to a more vuera friendly component, if this is not supported.

[akxcv]

<Page navigation={ <Navigation> Example Navigation </Navigation> } /> 

Hmm, yeah, vuera doesn't support that at the moment. I'll think about what can be done here.

[akxcv]

Sorry for the delay, but I never got to play around with this. It seems, however, very similar to #19 in that if we could teach vuera not to wrap direct children (or props) of components (if frameworks match), this would be solved I think.

[RaimisJ]

I ended up using a React wrapper components for such cases:

E.g. create a React wrapper component named PageWrapper.js and use it in Vue: <PageWrapper navigation="navigationObj" />

and In this React component wrapper (PageWrapper.js): <Page navigation={ <Navigation> this.props.navigation</Navigation> } />

[akxcv]

Yeah, but it would be nice if vuera was a little bit smarter :)

[YuraKostin]

Hello, @RaimisJ.

I have to do a similar things.

Can you please provide an example of the wrapper component and how do they interact with vue components? Have you made any changes in your webpack config accordingly?

Thanks.

[RaimisJ]

@YuraKostin, the component is a standard React component, which uses another React components (which can not directly be used with vuera). See an example in my previous post.

In webpack config, I have added 'transform-react-jsx' plugin to plugins in .babelrc in order to write and use my own React components in jsx.

In my project structure I am using React components for purely GUI actions, which emits socket messages on GUI actions. Then this message is received in vue part which modifies data if needed. This data is used for custom React component rendering, so it re-renders if this data is changed.

[YuraKostin]

Hi, @RaimisJ. Thanks for your answer.

The problem was in two plugins, which i used in same time: transform-react-jsx and transform-vue-jsx. I removed the second plugin and now all works fine except event handling.

I think that i need to open another issue..