我有一个 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 的内容,但这似乎是极不推荐的。
如何干净利落地将一个组件传递给堆栈深处的另一个组件?
最佳答案
一些想法:
首先,将任何不可序列化的东西(例如组件或函数)放入 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 组件.
关于reactjs - 如何干净利落地将 React 组件传递给组件层次结构深处的另一个组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41557696/