search

firtoz / react-three-renderer

Render into a three.js canvas using React.
https://toxicfork.github.com/react-three-renderer-example/
MIT License
1.49k stars 155 forks source link

Passing React context to child components #140

Open kevinhikaruevans opened 7 years ago

kevinhikaruevans commented 7 years ago

I'm having some trouble with passing the context (for Redux's store) into a react-three-renderer component. I'm trying to use Redux's connect() on a component that returns an object3d, but it's giving me this error:

Uncaught (in promise) Error: Could not find "store" in either the context or props of "Connect([component] map)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect([component] map)". at invariant (http://localhost:8080/bundle.js:65251:15) at new Connect (http://localhost:8080/bundle.js:70594:58) at http://localhost:8080/bundle.js:98048:24

It looks like the context isn't being passed to the child component in this instance, but it works fine if the child is a <div> or any other HTML element.

Here's where I'm calling connect() map.js: https://github.com/kevinhikaruevans/uojs2/blob/get-map-data/src/client/components/map/index.js#L13

The parent container is in scene/index.js, which is in pages/game/index.js. The <Provider> before our router should be passing the context in here.

Is this a bug or am I overlooking something?

Thanks!

For reference, here's the original issue

toxicFork commented 7 years ago

Hi, I will take a look and add some tests for it later this week :)

On Mon, 9 Jan 2017, 22:19 Kevin Evans, notifications@github.com wrote:

I'm having some trouble with passing the context (for Redux's store) into a react-three-renderer component. I'm trying to use Redux's connect() on an object3d, but it's giving me this error:

Uncaught (in promise) Error: Could not find "store" in either the context or props of "Connect([component] map)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect([component] map)". at invariant (http://localhost:8080/bundle.js:65251:15) at new Connect (http://localhost:8080/bundle.js:70594:58) at http://localhost:8080/bundle.js:98048:24

It looks like the context isn't being passed to the child component in this instance, but it works fine if the child is a

or any other HTML element.

Here's where I'm calling connect() map.js: https://github.com/kevinhikaruevans/uojs2/blob/get-map-data/src/client/components/map/index.js#L13

The parent container is in scene/index.js https://github.com/kevinhikaruevans/uojs2/blob/get-map-data/src/client/components/scene/index.js#L48, which is in pages/game/index.js https://github.com/kevinhikaruevans/uojs2/blob/get-map-data/src/client/pages/game/index.js#L17

Is this a bug or am I overlooking something?

Thanks!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/toxicFork/react-three-renderer/issues/140, or mute the thread https://github.com/notifications/unsubscribe-auth/AA0iLRHHPc6y2wsAcTUjk1etlFjIfY8Nks5rQrJ6gaJpZM4LezEB .

sehcheese commented 7 years ago

I have success using it with Redux by passing store as a prop to the react-three-renderer components all the way down the chain. Is that not working for you @kevinhikaruevans? Admittedly the context passing would be nice, but passing it as a prop seems to work.

kevinhikaruevans commented 7 years ago

I was having weird issues passing the entire store as a prop. I couldn't figure it out, so I ended up passing the 3 variables I needed from the store as props. It's not a big deal for me, but it would definitely be nice to have context passing. 😄

toxicFork commented 7 years ago

So far my test was passing context that was created already within R3R. However I think there may be some issues while passing it through some boundaries. Therefore I will classify it as a bug. I'm also thinking of workarounds, and yes one of them is to pass it as a prop :)

coldi commented 7 years ago

I experienced problems with context as well. They don't make it down the React3 component. It was also not possible to set context within a R3R component and pass it down. For me it seems using context within R3R is broken somehow :(

toxicFork commented 7 years ago

Alright I will find a work around for this, hopefully it won't require too much magic!

Unfortunately, context is a little bit of dark magic in itself.

I'll write my notes in this issue.

For now, passing context within components that are all within R3R should work (e.g. a scene component context passing to object3d component context)... Passing it through the main React3 component may not (since it's essentially using a different renderer whose internals are different).

If "all contained" context doesn't work, please write any examples you find here and I'll add them to my tests.

On Wed, 25 Jan 2017 at 20:05 coldi notifications@github.com wrote:

I experienced problems with context as well. They don't make it down the React3 component. It was also not possible to set context within a R3R component and pass it down. For me it seems using context within R3R is broken somehow :(

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/toxicFork/react-three-renderer/issues/140#issuecomment-275217943, or mute the thread https://github.com/notifications/unsubscribe-auth/AA0iLQJ5B9egJ9vuIYSBSXI913aOePE4ks5rV6scgaJpZM4LezEB .

kenta88 commented 7 years ago

Hello @toxicFork There are some improvement about this one?

toxicFork commented 7 years ago

Hi @kenta88 unfortunately I had no opportunities to continue work in my spare time lately, I had attempted to recreate r3r on top of react fiber which will help solve the context problem but unfortunately because of my chaotic schedule I cannot provide an ETA on when that may be released.

kenta88 commented 7 years ago

Of course @toxicFork. Let me know if can I provide some help to rebuild the library. I'll be very happy to help.

sirrodgepodge commented 7 years ago

hey @toxicFork can you share your branch?

toxicFork commented 7 years ago

Sure, https://github.com/toxicFork/react-three-renderer-fiber

Matkezi commented 6 years ago

Any update on this one?

Venryx commented 6 years ago

Just wanted to mention that I worked around this issue in a non-standard way. I "cheated" and added a "store" getter-property to the React.Component.prototype object, which returns the global store object.

It's not a very "clean" approach, but consider it okay in my case since I only need it as a temporary patch. (since I expect this won't still persist to the fiber version when completed)