使用ReactJS從兄弟組件調用方法

Question

我有一個ReactJS App ，我在下圖中盡可能減少到最小值：

附注：在此App我使用Redux來管理狀態更改。

此App包含：

• 組件：帶有圖像保持器和按鈕的UploadScreen 。 單擊該按鈕時，用戶會顯示一個Popup Window ，讓他從設備文件系統中選擇一個圖像。 然后該圖像顯示在圖像持有者上。

• 組件： AuxWidget是一個完全不同的組件（需要分開），它還包含一個按鈕，單擊該按鈕時，它應彈出Select File窗口。 我在考慮觸發第一個按鈕的click事件。

有關如何實現這一點的任何想法 ？

首先我想使用Redux但我認為這不是一個好主意，因為即使你可以將消息從一個組件發送到另一個組件，這會導致渲染更新，我不希望這樣。

此外，我正在考慮使用jQuery但這並不是ReactJS的最佳方法。

此外，我考慮使用屬性： ref="foo"來獲取對其他組件的引用，但我認為通常在您希望交互在父組件和子組件之間時完成。

此外，我正在考慮EventEmmitter但我不知道這是否是這種情況下的最佳方法（我使用Redux來管理組件之間的狀態變化）。

Answer 1

我可以建議使用RxJS的最佳方法之一 ，您可以創建一個主題並將其傳遞給您的組件。 在一個組件中，您需要訂閱它，並且每當您從第二個組件調用下一個主題時，另一個組件將被通知，因此您可以觸發打開彈出窗口。 如果您不想將新庫添加到項目中，您甚至可以為此創建自己的實現。

Answer 2

當應用中的某個狀態發生變化時，可以觸發上傳窗口。 應用程序上的相關狀態可以從不同的地方更改，例如AuxWidget和UploadScreen 。 這樣他們就不會與上傳窗口相關聯。 它們只調用一個傳遞給它們的函數，該函數改變了應用程序的狀態，它將顯示窗口。

如果您在兩個不相關的組件之間有共享組件，我認為最好提升該公共組件並讓其狀態處於更高級別。

Answer 3

如果我理解正確，那么你主要關注的是代碼重用，而不是想要調用兄弟方法。 基本上，您需要一個可以干凈地重復使用（打開/關閉）的SelectFilePopup組件。 我認為React Portals可能是一個很好的解決方案。 我找到了一個很好的例子（ https://github.com/Assortment/react-modal-component/blob/master/src/components/Modal.js ），了解如何將Modal隔離到一個組件中並在其中的任何位置調用代碼庫。

Modal的用法看起來像這樣（從上面的github項目中的App.js復制並稍加修改）

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

和Modal組件實現（簡化）

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

默認情況下，當isOpen狀態為false時，Modal組件顯示觸發器（即按鈕）。 單擊后，isOpen切換為true，ModalContent（即可以是FilePickerPopup）動態創建並附加到文檔正文。 您可以查看源代碼以獲取更多詳細信息。 我認為它是一種非常干凈的模態解決方案。 因此，在您的情況下，您的代碼最終可能會看起來像這樣

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>

所以基本上，AuxWidget甚至不需要知道FileSelectPopup的位置。 它是一個可以在任何地方調用的獨立組件。 需要注意的是，我鏈接到的項目中的模態實現不是單例（盡管它可以修改為一個）。 因此，如果AuxWidget和UploadScreen同時對用戶可見，則單擊“上載圖像”按鈕將創建兩個Popup實例。

Answer 4

我將在父組件中定義該函數，並將其作為props傳遞給兩個子組件