xjpro / react-in-angularjs

A super simple way to render React components in AngularJS
The Unlicense
23 stars 13 forks source link

Updating binded value is not updating props into component #2

Closed psyycker closed 4 years ago

psyycker commented 4 years ago

I'm working on a modal system and managing if the modal is open or closed based on a boolean sent in props. The initial value is taken but if I change it, my component is not reacting to it. Any idea ?

xjpro commented 4 years ago

Yes, I encounter this often, usually because I'm not updating the angularized React component props. There's a variety of reasons this might happen and it depends on the type of scope linking you're doing (<, @, =, &). Without getting too much further in the weeds, the first thing I'd need to see is a bit of code so I can advise further. Namely,

xjpro commented 4 years ago

@psyycker Did you need more help with this?

psyycker commented 4 years ago

Sorry, I've been pretty busy, Couldn't reply. The problem is still there but as "hack" I've used a callback to update the state of the component from angularjs. Not the best practice but does the work

xjpro commented 4 years ago

The wrapped React component is supposed to rerender if a prop changes but it depends on how they are linked up. If you get a chance to paste some code I'd like to see what is is you're doing. It might help me improve on the library.

psyycker commented 4 years ago

I unfortunately can't share you code as it belong to my company. But what I can say is, I'm working on a modale. The modale is then rendered by default with a show variable false by default and set into the Angularjs controller. When I switch this variable to true (vm.showDialog = true) nothing is changing. Could it work by doing a scope.apply ?

xjpro commented 4 years ago

When you use the angularize function what kind of binding do you give the component (<, =, or @)?

psyycker commented 4 years ago

I'm using '='

xjpro commented 4 years ago

In version 17.1.0 I've improved the React rerendering when using the = two way binding. Try it out.

psyycker commented 4 years ago

Perfect, I'll give it a try later. I could manage to make it work by using the one way binding '<'. Also sometimes, angularjs is a bit stupid and I have to force the re render with a scope.apply() :( Thanks for you hard work !

Le mer. 2 oct. 2019 à 16:31, xjpro notifications@github.com a écrit :

Closed #2 https://github.com/xjpro/react-in-angularjs/issues/2.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/xjpro/react-in-angularjs/issues/2?email_source=notifications&email_token=ACHWL3TSICPIE6IEOYSSKPLQMS5D7A5CNFSM4IWOTWV2YY3PNVWWK3TUL52HS4DFWZEXG43VMVCXMZLOORHG65DJMZUWGYLUNFXW5KTDN5WW2ZLOORPWSZGOT7GZJDY#event-2681050255, or mute the thread https://github.com/notifications/unsubscribe-auth/ACHWL3SPK4NZMTTZNGZ6RSLQMS5D7ANCNFSM4IWOTWVQ .

xjpro commented 4 years ago

Yup - sharing data between React and AngularJS is always going to be the challenge of using both in an application. The two frameworks have very different approaches to handling updates.