[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 ...
随机推荐
- HDU 3131 One…Two…Five! (暴力搜索)
题目链接:pid=3131">HDU 3131 One-Two-Five! (暴力搜索) 题意:给出一串数字,要求用加,减,乘,除(5/2=2)连接(计算无优先级:5+3*6=8*6= ...
- arguments对象----不定参数的实现方式
function format(string) { var args = arguments; var pattern = new RegExp("%([1-" + argumen ...
- Flask项目之手机端租房网站的实战开发(十一)
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...
- web自动化测试 Selenium2 Java自动化测试实战9_3
driver.findElement(By.id("idInput")).sendKeys("哈哈"); driver.findElement(By.id(&q ...
- Cronolog 分割 Tomcat8 Catalina.out日志 (转)
默认情况下,tomcat的catalina.out日志文件是没有像其它日志一样,按日期进行分割,而是全部输出全部写入到一个catalina.out,这样日积月累就会造成.out日志越来越大,给管理造成 ...
- LeetCode Algorithm 05_Longest Palindromic Substring
Given a string S, find the longest palindromic substring in S. You may assume that the maximum lengt ...
- JS学习笔记 - 面向对象 - 原型
<script> var arr1 = new Array(12, 55, 34, 78, 676); var arr2 = new Array(12, 33, 1) Array.prot ...
- 16进制串与ASCII字符串相互转换
提供两个函数,方便十六进制串与ASCII 字符串之间的相互转换,使用函数需要注意的是返回的串是在堆上通过 calloc 分配的,所以,记得使用完返回值释放该块,并且将指向该块的指针 =NULL .// ...
- Android 最火的高速开发框架AndroidAnnotations使用具体解释
Android 最火的高速开发框架androidannotations配置具体解释文章中有eclipse配置步骤.Android 最火高速开发框架AndroidAnnotations简介文章中的简介. ...
- MyEclipse中 使用svn更新jar包 出现 svn cleanup failed–previous operation has not finished; run cleanup if it was interrupted 导致整个svn异常处理
svn cleanup failed–previous operation has not finished; run cleanup if it was interrupted 2014-07-02 ...