[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 ...
随机推荐
- 字串乱序 PHP&JS
<?php /** * 字串乱序 PHP&JS * * php 中把字串乱序后输出给客户机的 JAVASCRIPT , JAVASCRIPT 中恢复 * 在指定长度提取一个字符,并把这一 ...
- ListView-divider 分割线的设置
1.去掉分割线 android:divider="@null" 2.设置分割线颜色跟宽度 android:divider="#19000000" android ...
- UIViewController所有API的学习。
<欢迎大家加入iOS开发学习交流群:QQ529560119> /* UIViewController is a generic controller base class tha ...
- poj 1191 棋盘切割 (压缩dp+记忆化搜索)
一,题意: 中文题 二.分析: 主要利用压缩dp与记忆化搜索思想 三,代码: #include <iostream> #include <stdio.h> #include & ...
- Linux常用命令及解析
基本日常命令 init 3 (进入命令行页面) steup (设置网络) exit (退出用户) pwd(查看当前所在目录) date(查看当前系统时间) 举例:(date +%Y-%m-%d)以年月 ...
- UIDeviceOrientationDidChangeNotification和UIApplicationDidChangeStatusBarFrameNotification
这几天做App的时候,需要添加旋转屏通知以便调整UI布局 刚开始我使用的是UIDeviceOrientationDidChangeNotification, 一直有一些问题就是,如果使用这个通知,当i ...
- iOS开发UI篇--一个侧滑菜单SlidingMenu
一.简介 侧滑菜单已经成为app一个极常用的设计,不管是事务类,效率类还是生活类app.侧滑菜单因Path 2.0和Facebook为开发者熟知,国内目前也有很多流行app用到了侧滑菜单,比如QQ.网 ...
- 【习题 3-4 UVA - 455】Periodic Strings
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举 [代码] #include <bits/stdc++.h> using namespace std; const ...
- -bash: /usr/local/mysql/scripts/mysql_install_db: /usr/bin/perl: bad interpreter: No such file or directory
安装 MySQL 初始化时,报错如下: [root@hcdb1 ~]# /usr/local/mysql/scripts/mysql_install_db --defaults-file=/etc/m ...
- vue学习笔记一:用Key管理可复用元素
vue为了高效的渲染元素,会尽可能的复用组件,而不是从头渲染,如下案例 <template> <div id="app"> <template v-i ...