Question

我有一个ReactJS App，在下图中将其减少到了最低程度：

旁注：：在此App上，我使用Redux管理状态更改。

此App包含：

组件： UploadScreen，带有一个图像支架和一个按钮。单击该按钮时，将向用户显示一个Popup Window，让他可以从设备文件系统中选择图像。然后，该图像将显示在图像支架上。
组件： AuxWidget，它是一个完全不同的组件（需要分开），其中还包含一个按钮，单击该按钮时应弹出{{1} }窗口。我当时在考虑触发第一个按钮的点击事件。

关于实现该目标的任何想法？

首先，我虽然要使用Select File，但我认为这不是一个好主意，因为即使您可以将消息从一个组件发送到另一个组件，这也会导致渲染更新，而我不希望这样做。

此外，我还在考虑使用Redux，但这不是jQuery的最佳方法。

我还考虑过使用属性ReactJS来引用其他组件，但是当您希望在父组件和子组件之间进行交互时，我通常认为这是完成的。

我还考虑过ref="foo"，但是我不知道这是否是这种情况下的最佳方法（我正在使用EventEmmitter来管理组件之间的状态变化）。

Answer 1

我建议使用RxJS的最好方法之一是，您可以创建一个Subject并将其传递给您的组件。在一个组件中，您需要订阅它，每当您从第二个组件中调用下一个主题时，都会通知另一个组件，因此您可以触发打开弹出窗口。如果您不想向项目中添加新库，甚至可以为此创建自己的实现。

Answer 2

当应用程序中的某个状态更改时，可以触发上传窗口。应用程序的相关状态可以在不同的位置进行更改，例如从AuxWidget和UploadScreen进行更改。这样，它们就不会与上传窗口结合在一起。他们只是调用传递给他们的函数，该函数会更改应用程序的状态，并显示窗口。

如果您在两个不相关的组件之间有一个共享的组件，我认为最好取消该通用组件并将其状态置于更高的级别。

Answer 3

如果我理解正确，那么您最关心的是代码重用，而不是想要调用同级方法。基本上，您希望可以干净地重用（打开/关闭）SelectFilePopup组件。我认为React Portal可能是一个很好的解决方案。我找到了一个很好的例子（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的位置。它是一个独立的组件，可以在任何地方调用。需要注意的是，我链接到的项目中的Modal实现不是单例（尽管可以将其修改为一个）。因此，如果用户同时可见AuxWidget和UploadScreen，则单击两个Upload Image按钮将创建两个Popup实例。

Answer 4

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

使用ReactJS从兄弟组件调用方法

4 个答案: