[React & Debug] Quick way to debug Stateless component
For example we have the following code:
const TodoList = (props) => (
<div className="Todo-List">
<ul>
{props.todos.map(todo => <TodoItem key={todo.id} {...todo} />)}
</ul>
</div>
)
Because we wrote as function component, it is using the implicit return. To debug what props have been passed in. we can add console.log before the function:
const TodoList = (props) => console.log(props) || (
<div className="Todo-List">
<ul>
{props.todos.map(todo => <TodoItem key={todo.id} {...todo} />)}
</ul>
</div>
)
Because console.log return "underfined", so in the end, it will also run the function to render the statless component.
[React & Debug] Quick way to debug Stateless component的更多相关文章
- React Native填坑之旅--Stateless组件
Stateless component也叫无状态组件.有三种方法可以创建无状态组件. 坑 一般一个组件是怎么定义的: 很久以前的方法: const Heading = createClass({ re ...
- [Recompose] Add Local State to a Functional Stateless Component using Recompose
Learn how to use the 'withState' and 'withHandlers' higher order components to easily add local stat ...
- react 创建组件 (四)Stateless Functional Component
上面我们提到的创建组件的方式,都是用来创建包含状态和用户交互的复杂组件,当组件本身只是用来展示,所有数据都是通过props传入的时候,我们便可以使用Stateless Functional Compo ...
- [React] displayName for stateless component
We can use 'displayName' on component to change its component tag in dev tool: import React from 're ...
- 3.React Native在Android中自己定义Component和Module
React Native终于展示的UI全是Native的UI.将Native的信息封装成React方便的调用. 那么Native是怎样封装成React调用的?Native和React是怎样交互的? V ...
- 【Debug 报异常】Debug打断点报错
用DEBUG启动项目,项目中打断点的,然后会报异常 解决方法: 第一步: 项目-->Java编译器-->Classfile Generation 复选框 全部勾选 第二步: 替换当前文件运 ...
- react 函数子组件(Function ad Child Component)
今天学习了react中的函数子组件的概念,然后在工作中得到了实际应用,很开心,那么好记性不如烂笔头,开始喽~ 函数子组件(FaCC )与高阶组件做的事情很相似, 都是对原来的组件进行了加强,类似装饰者 ...
- Xcode DEBUG宏定义,debug和release模式的选择
设置DEBUG, 使用宏定义: #if DEBUG NSLog(@"debug model"); #else //执行release模式的代码 #endif
- [React] Forward a DOM reference to another Component using forwardRef in React 16.3
The function forwardRef allows us to extract a ref and pass it to its descendants. This is a powerfu ...
随机推荐
- js sort()函数 排序问题 var arr =['A-1-5-1','A-1-10-2','A-1-5-5','B-2-3-1','C-4-10-1'], 对这个数组进行排序,想达到的效果是["A-1-5-1", "A-1-5-5", "A-4-10-1", "A-1-10-2", "A-2-3-1"]
先介绍个方法 charCodeAt() 方法可返回指定位置的字符的 Unicode 编码.这个返回值是 0 - 65535 之间的整数. stringObject.charCodeAt(index) ...
- 参考《利用Python进行数据分析(第二版)》高清中文PDF+高清英文PDF+源代码
第2版针对Python 3.6进行全面修订和更新,涵盖新版的pandas.NumPy.IPython和Jupyter,并增加大量实际案例,可以帮助高效解决一系列数据分析问题. 第2版中的主要更新了Py ...
- 为什么linux驱动中变量或者函数都用static修饰?(知乎问题)
static定义的全局变量 或函数也只能作用于当前的文件. 世界硬件厂商太多,定义static为了防止变量或 函数 重名,定义成static, 就算不同硬件驱动中的 变更 或函数重名了也没关系 .
- js编码方式详解
escape.encodeURI 和encodeURIComponent 的区别 escape(), encodeURI()和encodeURIComponent()是在Javascript中用于编码 ...
- MySQL Field排序法
检索 id = 2 or id = 5 or id = 9 or id = 56 or id = 38.然后按照 2 , 5, 9, 56, 38 这个顺序排列,这是题目要求 以下为解决方案: 1 ...
- 【Henu ACM Round #13 A】 Hulk
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟. [代码] #include <bits/stdc++.h> using namespace std; int m ...
- qt hex to dec
QString s = "32FE12AD"; quint8 u8vlaue = 0; sscanf(s.toStdString().c_str(), ...
- Dojo Chart之经常使用统计图
非常多做web的都知道,在非常多web系统中会涉及到一些统计图.比如饼状图,柱状图.趋势图.以及叠加图等.提到这儿,做web的都非常熟悉的,jquery的highcharts就能搞定全部的涉及到统计图 ...
- mysql_jdbc
package com.lovo.day18_jdbc1; import java.sql.Connection; import java.sql.DriverManager; import java ...
- POJ 2185 正解 KMP
题意: 思路: 把每一行压成一个数 求一下 KMP 把每一列压成一个数 求一下KMP 答案就是两个周期之积 网上的好多题解都是错的---------.. //By SiriusRen #include ...