翻译|How to Export a Connected Component
原文在这里:How to Export a Connected Component
根据你在export
的不同,可以获得一个完美的函数式React-Redux connected组件,或者是一个完全忽略Redux的组件
换句话说这里两个完全不同的世界:
class Thing extends Component { ... }export default connect(mapStateToProps)(Thing);
复制代码
还有这个:
export class Thing extends Component { ... }connect(mapStateToProps, mapDispatchToProps)(Thing);
复制代码
如果设定为第二个实例,可以注意到所有的React有关的东西,但是Redux的函数,mapStateToProps
和mapDispatchToProps
没有返回
connect
不会对组件作出改变
在你用connect包装一个组件的时候, 例如connect(...)(Thing)
,重要的一点要理解,虽然返回的是一个connected的组件,但是它根本没有动过原始的Thing组件任何东西.
换句话说,运行connect(...)(Thing)
,没有"connect"到Thing
组件,缺失没有. 所做的是翻译一个经过连接的新组件.
导出Connected组件
所以,在导出组件的时候,一定要定义到底连接的是哪一个组件.确保export
关键字出现在 connect
调用的前面,像这样:
export default connect(...)(Thing);
复制代码
为什么不同时导出原始组件和经过连接的组件?
同时导出连接组件和未连接组件非常有效.对于测试大有好处-例如想测试没有没有连接到模拟Redux store的组件.
下面是同时导出未连接组件和连接组件的代码:
export class Thing extends React.Component {render() {return "whatever";}
}const mapState = state => ({ someValue });
const mapDispatch = { action1, action2 };export default connect(mapState, mapDispatch)(Thing);
复制代码
注意这里有两个导入,其中之一是名字,另一个是default,这里的定义很重要,因为会影响到后面的导入(import).
Import 连接组件
总的原则是,如果某个代码是用exprot default
,在导入的时候不用{}
,;例如:
// Thing.js
export default connect(...)(Thing);// UserOfThing.js
import Thing from './Thing';
复制代码
如果导出的是名字,需要使用{}
:
// Thing.js
export function Thing() { ... }// UserOfThing.js
import { Thing } from './Thing';
复制代码
转载于:https://juejin.im/post/5cc3b2e0f265da038b2020fd
翻译|How to Export a Connected Component相关推荐
- C++实现connected component连通分量(附完整源码)
C++实现connected component连通分量 C++实现connected component连通分量完整源码(定义,实现,main函数测试) C++实现connected compone ...
- C++用并查集Disjoint union实现connected component连通分量(附完整源码)
C++用并查集Disjoint union实现connected component连通分量 C++用并查集Disjoint union实现connected component连通分量完整源码(定义 ...
- LintCode Find the Weak Connected Component in the Directed Graph
原题链接在这里:http://www.lintcode.com/en/problem/find-the-weak-connected-component-in-the-directed-graph/ ...
- Connected component
活动地址:CSDN21天学习挑战赛 Undirected Graph An Undirected graph is connected if, for every pair nodes, th ...
- Codeforces 1196E Connected Component on a Chessboard
https://codeforces.com/contest/1196/problem/E 题解:贪心 /* *@Author: STZG *@Language: C++ */ #include &l ...
- 使用React,Redux,redux-sage构建图片库(翻译)
看到这篇文章build an image gallery using redux saga,觉得写的不错,长短也适中. 文后有注释版的github代码库,请使用comment分枝. Flickr AP ...
- kaggle lung cancer detection--Full Preprocessing Tuturial(附翻译)
原文链接:https://www.kaggle.com/gzuidhof/full-preprocessing-tutorial/notebook Introduction Working with ...
- 《Adapting the Tesseract Open Source OCR Engine for Multilingual OCR》论文翻译
本文是Tesseract在多语种方面OCR改进措施,刚好最近也在做相关工作,就顺便翻译了下.总的来说,看完之后对自己的相关工作也有一定的启发,感觉还不错,就在这分享一下.目前只翻译了下ocr的版面分析 ...
- 深入解析Angular Component的源码示例
本篇文章主要介绍了剖析Angular Component的源码示例,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Web Component 定 ...
最新文章
- python 源码解析
- 【深度学习】Batch Normalization(BN)超详细解析
- ActionBar设置自定义setCustomView()留有空白的问题
- on java 8 学习笔记 2022.2.16
- 基于android 定位系统,基于Android平台定位系统设计和实现
- 对eventloop的研究
- [react] 简要描述下你知道的react工作原理是什么?
- python字符串转64位数字_python-将String转换为64位整数映射字符以自定义两位值映射...
- 调整oracle scn,在Oracle中增进SCN及案例介绍
- 40岁,将站到哪里(转)
- cjson 对象是json数组型结构体_CJSON中有关于在对象中放数组,数组中放对象,以及其解析...
- 安卓8.0卡刷杜比音效——magisk模块的安装和使用
- H5 查看大图。缩放图片
- 854. Floyd求最短路
- 【论文翻译】Frustratingly Simple Few-Shot Object Detection
- kafka系列(4)- kafka集群操作
- 灰狼算法(GWO)优化长短期记忆神经网络的数据回归预测,GWO-LSTM回归预测,多输入单输出模型。
- ps无法启动因为计算机中丢失api ms,解决win8下ps提示“丢失api-ms-win-crt-runtime-l1-1-0.dll”的方法...
- 编程语言与数据库的关系
- RK3588 RGA 图像操作