Communication between nested but independent components in react.js

Question

i like to develop a simple tooltip component in react.js

the tooltip gets defined like so in e.g. App.jsx:

<TooltipLink>Hover over me
    <Tooltip>I am the Tooltip content</Tooltip>
</TooltipLink>

My question is: What is the best way of TooltipLink and Tooltip to talk to each other?

They are nested but I cannot use props because they are not nested directly in the component itself. Also, I don't want to use the parent (e.g. App.jsx) to manage the communication between TooltipLink and Tooltip because I want them to be self-contained.

I thought about refs but when i define a ref inside the Tooltip component then TooltipLink does not know about it (I assume because refs only work when components are nested inside the components themselves).

I could of course use simple DOM-programming for TooltipLink and Tooltip to communicate (e.g. use e.target when the user hovers over TooltipLink and then find its first child) but I thought there must be a more react-y way...

You can use TooltipLink's props.children to communicate with Tooltip (using React.children api : reactjs.org/docs/react-api.html#reactchildren) — Dyo
– Dyo, Commented Feb 23, 2018 at 11:02
@chris: nope i want the plugin to be independent from sth like that — nerdess
– nerdess, Commented Feb 23, 2018 at 11:29
@dyo: yes but then i only get the unrendered version of the Tooltip (not the actual DOM-element) — nerdess
– nerdess, Commented Feb 23, 2018 at 11:29
@nerdess You use can pass "callback" functions as props to the children to do the communication like you do in a simple parent/child communication, maybe this can help you understand : javascriptstuff.com/component-communication — Dyo
– Dyo, Commented Feb 23, 2018 at 11:33

jb cazaux · Accepted Answer · 2018-02-23 11:07:28Z

0

You have 3 options:

cascading props in the whole hierarchy
using redux
using the context API

I prefer to use redux, because the context API is not officially supported (breaking changes may happen, like in react 16.3). Cascading props is not really beautiful but may be convenient for small apps. (<MyComponent {...props}>)

answered Feb 23, 2018 at 11:07

jb cazaux

3201 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Communication between nested but independent components in react.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related