react in vue: SyntheticEvent doesn't work

[yangchendoit]

when i use react component in vue, I try like this, but the test method doesn't work

react componet

vue

result

it displays well, but all SyntheticEvent doesn't work, when i click two buttons, the methods don't be triggered

[akxcv]

Hi! It seems that you have a mistake in your React component:

<button onClick={testM('test')}>click props method</button>

should instead be:

<button onClick={() => testM('test')}>click props method</button>

[yangchendoit]

sorry, my fault, but i fix this mistake , it doesn't work either. it's very strange, when i click both of those buttons, the corresponding methods don't be triggered. not only the testM method from props, but also the testMethod.

thanks for your reply!

[akxcv]

I'm trying to reproduce this but cannot so far. Could you provide a minimal example app where this issue arises?

[yangchendoit]

I check the dependencies of my project, Find babel-preset-vue-app in them, And it depends on babel-plugin-transform-vue-jsx, i also use babel-plugin-transform-react-jsx in the project, babel-plugin-transform-react-jsx and babel-plugin-transform-vue-jsx are in conflict, So that creates the above problem.

[akxcv]

Hmm, maybe it would be helpful to set up an example application in the repo so that people can reference it if they have trouble setting up their app.

[yangchendoit]

https://codesandbox.io/embed/react-in-vue-csubm this is a simple demo, but in codesandbox, It will give you an error like Could not find path: '@babel/plugin-transform-react-jsx'.(It doesn't appear locally), and you can do that locally.