reactjs - 如何干净利落地将 React 组件传递给组件层次结构深处的另一个组件？

Question

我有一个 React + Redux + Typescript 应用程序，由一张 map 、几个图表和一系列模式对话框(其中一个是打印表单)组成。 presentational and container components组成如下。

┌──────────────────────────────────────────┐  
│ app.tsx                                  │
│  ┌─────────────────────────────────────┐ │
│  │ modalsContainer.tsx                 │ │
│  │  ┌────────────────────────────────┐ │ │ 
│  │  │ printModal.tsx                 │ │ │
│  │  │  ┌───────────────────────────┐ │ │ │
│  │  │  │ printFormContainer.tsx    │ │ │ │
│  │  │  │    const mergeProps(...); │ │ │ │
│  │  │  └───────────────────────────┘ │ │ │
│  │  └────────────────────────────────┘ │ │ 
│  └─────────────────────────────────────┘ │
│  ┌─────────────────────────────────────┐ │
│  │ mapContainer.tsx                    │ │
│  │  ┌────────────────────────────────┐ │ │ 
│  │  │ map.tsx                        │ │ │
│  │  │     private map:EsriMap        │ │ │
│  │  └────────────────────────────────┘ │ │ 
│  └─────────────────────────────────────┘ │ 
│  ┌─────────────────────────────────────┐ │
│  │ dashboard.tsx                       │ │
│  │  ┌────────────────────────────────┐ │ │ 
│  │  │ charts.tsx                     │ │ │
│  │  └────────────────────────────────┘ │ │ 
│  └─────────────────────────────────────┘ │ 
└──────────────────────────────────────────┘

打印表单允许用户将图表和 map 打印成 pdf 格式。基于所选图表和当前 map 打印报告的 Web 请求。此逻辑在 const mergeProps(...); 中设置如下所示:

const mergeProps = (stateProps: any, dispatchProps: any, ownProps: any): any => {
    return {
        fetchReport: (title: string, summary: string, includeMap: boolean) => {
            if(includeMap) {
               // fetch map image
               // need access to mapcontainer /map / esrimap here
            }

            // ... fetch report ...
        },
        close: dispatchProps.close
    };
};

这大部分都有效，但我还没有在报告中包含 map 图像。为了生成 map 图像，我需要执行 PrintTask .打印任务的参数之一是 esri map 对象。但是，我无法从 mergeProps 访问 MapContainer 或 Map 组件。如果我这样做了，我可以添加 Print():Promise<any>函数执行任务并返回图像。

我真的很想避免使用全局变量。 future 的其他功能也可能需要访问 map 。我还想避免将组件作为 props 如此深入地传递到堆栈中。我读了一些关于 context 的内容，但这似乎是极不推荐的。

如何干净利落地将一个组件传递给堆栈深处的另一个组件？

Answer 1

一些想法:

首先，将任何不可序列化的东西(例如组件或函数)放入 Redux 状态通常不是一个好主意(根据 https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state )。

其次，为什么当前在mergeProps中定义了回调逻辑？该选项实际上应该只是万不得已的后备方案。最好单独定义回调并将它们传递给组件。我在 http://blog.isquaredsoftware.com/2016/10/idiomatic-redux-why-use-action-creators/ 有一些讨论和例子.

接着，我认为最简单的方法是定义一个单独的回调函数，它将所需的标志和 EsriMap 对象作为参数，并将该函数作为 prop 传递给 Map 组件.