Call method from sibling component using ReactJS

Question

I have one ReactJS App which I reduced to the minimum as possible on the diagram below:

Side note: On this App I use Redux to manage state changes.

This App contains:

• Component: UploadScreen with an image holder and a button. When that button is clicked, the user gets displayed a Popup Window which let him to pick an image from his device file system. Then that image is displayed on the image holder.

• Component: AuxWidget which is a totally different component (needs to be separate) which also contains a button that when it is clicked it should popup the Select File window. I was thinking in something like triggering the click event of the first button.

Any idea on how to achieve that?

First I though about using Redux but I think that's not a too good idea because even though you can send messages with it from one component to another, that causes a render update and I don't want that.

Also, I was thinking on using jQuery but that's not the best approach when it comes to ReactJS .

Also, I thought about using the attribute: ref="foo" to get a reference to the other component but I think that's normally done when you want the interaction to be between parent and child components.

Also, I was thinking about EventEmmitter but I don't know if that's the best approach on this case (I'm using Redux to manage the state changes between components).

Answer 1

One of the best ways I can suggest using RxJS , you can create a Subject and pass it to your components. In one component you will need to subscribe to it and whenever you will call next on your subject from the second component, the other will be notified, so you can trigger open popup. You can even create your own implementation for this in case you don't want to add new library to your project.

Answer 2

The upload window could be triggered when a certain state in the app changes. The relevant state on the app could be changed from different places, like from AuxWidget and UploadScreen . That way they are not coupled with the upload window. They merely call a function that is passed to them and that function changes the state on the app and it will display the window.

If you have a shared component between two unrelated component I think it is best to lift that common component and let its state sit on a higher level.

Answer 3

If I understand things correctly, your primary concern is code-reuse as opposed to wanting to call a sibling method. Basically, you want a SelectFilePopup component that can be re-used (open/closed) cleanly. I think React Portals could be a good solution for this. I found a good example ( https://github.com/Assortment/react-modal-component/blob/master/src/components/Modal.js ) of how a Modal can be isolated into a component and be called anywhere in the codebase.

The usage of the Modal looks like this (copied and slightly modified from App.js in the github project above)

import Modal from './components/Modal';
<Modal><div>Click me to open Modal</div></Modal>

And the Modal component implementation (simplified)

render() {
    return (
        <Fragment>
            <ModalTrigger
                onOpen={this.onOpen}
            />
            {isOpen &&
                <ModalContent/>
            }
        </Fragment>
    )   
}    

By default the Modal component shows a trigger (ie button) when isOpen state is false. Once clicked, and isOpen switches to true, the ModalContent (ie can be the FilePickerPopup) is dynamically created and attached to document body. You can check out the source code for more details. I think its a very clean solution to modals. So in your case, your code could end up looking something like this

UploadScreen.js

import FileSelectPopup from './components/FileSelectPopup';
<FileSelectPopup>{Upload Image}</FileSelectPopup>

AuxWidget.js

import FileSelectPopup from './components/FileSelectPopup';
<FileSelectPopup>{Upload Image or some other text}</FileSelectPopup>

So basically, AuxWidget doesn't even need to know about where the FileSelectPopup is located at. It's an independent component that can be called anywhere. The caveat is that the Modal implementation in the project I linked to is not a singleton (although it can be modified to be one). So if AuxWidget and UploadScreen are visible to the user at the same time, clicking both Upload Image buttons will create two instances of the Popup.

Answer 4

我将在父组件中定义该函数，并将其作为props传递给两个子组件