使用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传递给两个子组件