[React] displayName for stateless component
We can use 'displayName' on component to change its component tag in dev tool:
import React from 'react'; import {FooterLink} from '../containers' export const Footer = () => (
<p>
Show:
{' '}
<FooterLink filter="all">All</FooterLink>
{' '}
<FooterLink filter="completed">Completed</FooterLink>
{' '}
<FooterLink filter="open">Open</FooterLink>
</p>
);
Footer.displayName = "myFooter";
In dev tool:
[React] displayName for stateless component的更多相关文章
- [React] Creating a Stateless Functional Component
Most of the components that you write will be stateless, meaning that they take in props and return ...
- React.createClass和extends Component的区别
React.createClass和extends Component的区别主要在于: 语法区别 propType 和 getDefaultProps 状态的区别 this区别 Mixins 语法区别 ...
- React Native 中的component 的生命周期
React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps ob ...
- [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 的 PureComponent Vs Component
一.它们几乎完全相同,但是PureComponent通过prop和state的浅比较来实现shouldComponentUpdate,某些情况下可以用PureComponent提升性能 1.所谓浅比较 ...
- [React & Debug] Quick way to debug Stateless component
For example we have the following code: const TodoList = (props) => ( <div className="Tod ...
- [React Native] Create a component using ScrollView
To show a list of unchanging data in React Native you can use the scroll view component. In this les ...
- [React] Write a stateful Component with the React useState Hook and TypeScript
Here we refactor a React TypeScript class component to a function component with a useState hook and ...
- [React] Refactor a Class Component with React hooks to a Function
We have a render prop based class component that allows us to make a GraphQL request with a given qu ...
随机推荐
- Talk the Talk
 Talk the Talk Mark Richards in Any pRoFESSion, jargon is used so that individuals within that pro- ...
- Vue 拖拽组件 vuedraggable 和 awe-dnd
vuedraggable:https://www.npmjs.com/package/vuedraggable awe-dnd:https://www.npmjs.com/package/awe-dn ...
- uva 1463 - Largest Empty Circle on a Segment(二分+三分+几何)
题目链接:uva 1463 - Largest Empty Circle on a Segment 二分半径,对于每一个半径,用三分求出线段到线段的最短距离,依据最短距离能够确定当前R下每条线段在[0 ...
- python中数据结构
列表:数组,矩阵 元组 映射:字典 集合
- Altium Designer如何统一调整标号大小,在pcb环境下
- 5、list列表常用方法说明
创建列表: 1 2 3 name_list = ['alex', 'seven', 'eric'] 或 name_list = list(['alex', 'seven', 'eric']) 基本操作 ...
- 【Codeforces Round #445 (Div. 2) B】Vlad and Cafes
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 傻逼模拟 [代码] #include <bits/stdc++.h> using namespace std; cons ...
- linux下设置密码复杂度限制,怎么设置?
在linux,设置密码复杂度的方法有几个1. 一个是在/etc/login.defs文件,里面几个选项PASS_MAX_DAYS 90 #密码最长过期天数PASS_MIN_DAYS 80 #密码最小过 ...
- 关于android的2.2与4.4的文件读取的一点发现
好久没有写文章了,本来想写的东西,时间一长,就感觉不想写了.没什么用,到用时.又不知道去哪找了或怎么解决. 有一句话说的好啊,好记性不如烂笔头. 我要做到善于总结.及时整理,额............ ...
- 数据结构与算法实验题 9.1 K 歌 DFS+剪枝
数据结构与算法实验题 K 歌 ★实验任务 3* n 个人(标号1~ 3 * n )分成 n 组 K 歌.有 m 个 3 人组合,每个组合都对应一个分数,你能算出最大能够得到的总分数么? ★数据输入 输 ...