We can use 'displayName' on component to change its component tag in dev tool:

  1. import React from 'react';
  2.  
  3. import {FooterLink} from '../containers'
  4.  
  5. export const Footer = () => (
  6. <p>
  7. Show:
  8. {' '}
  9. <FooterLink filter="all">All</FooterLink>
  10. {' '}
  11. <FooterLink filter="completed">Completed</FooterLink>
  12. {' '}
  13. <FooterLink filter="open">Open</FooterLink>
  14. </p>
  15. );
  16. Footer.displayName = "myFooter";

In dev tool:

[React] displayName for stateless component的更多相关文章

  1. [React] Creating a Stateless Functional Component

    Most of the components that you write will be stateless, meaning that they take in props and return ...

  2. React.createClass和extends Component的区别

    React.createClass和extends Component的区别主要在于: 语法区别 propType 和 getDefaultProps 状态的区别 this区别 Mixins 语法区别 ...

  3. React Native 中的component 的生命周期

    React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps ob ...

  4. [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 ...

  5. React 的 PureComponent Vs Component

    一.它们几乎完全相同,但是PureComponent通过prop和state的浅比较来实现shouldComponentUpdate,某些情况下可以用PureComponent提升性能 1.所谓浅比较 ...

  6. [React & Debug] Quick way to debug Stateless component

    For example we have the following code: const TodoList = (props) => ( <div className="Tod ...

  7. [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 ...

  8. [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 ...

  9. [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 ...

随机推荐

  1. 《鸟哥的Linux私房菜-基础学习篇(第三版)》(四)

    第3章 主机规划与磁盘分区        1. Linux与硬件的搭配        首先谈了认识计算机的硬件配置. 然后谈了选择与Linux搭配的主机配置. 在Linuxserver中,内存的重要性 ...

  2. 一起talk C栗子吧(第九十八回:C语言实例--使用消息队列进行进程间通信二)

    各位看官们,大家好,上一回中咱们说的是使用消息队列进行进程间通信的样例.这一回咱们接着上一回的内容继续说使用消息队列进行进程间通信.闲话休提.言归正转.让我们一起talk C栗子吧! 我们在上一回中介 ...

  3. 7. Spring Boot 启动加载数据 CommandLineRunner

    转自:https://blog.csdn.net/catoop/article/details/50501710

  4. JS contcat() 连接数组 函数

    语法: arrayObject.concat(arrayX,arrayX,......,arrayX) 1.把元素添加到数组中 arr.concat(a,b,c);2.把数组连起来 arr.conca ...

  5. request.getRemoteUser() Spring Security做权限控制后

    一. request.getRemoteUser();//获取当前缓存的用户,比如Spring Security做权限控制后就会将用户登录名缓存到这里 request.getRemoteAddr(); ...

  6. Java Web学习总结(8)——使用Cookie进行会话管理

    一.会话的概念 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 有状态会话:一个同学来过教室,下次再来教室,我们会知道这个同学曾 ...

  7. 洛谷 P2646 数数zzy

    P2646 数数zzy 题目描述 zzy自从数学考试连续跪掉之后,上数学课就从来不认真听了(事实上他以前也不认真听).于是他开始在草稿纸上写写画画,比如写一串奇怪的字符串.然后他决定理♂性♂愉♂悦♂一 ...

  8. 解决Keystore was tampered with, or password was incorrect

    使用签名文件keystore查看生成的数字签名中报错解决 Keystore was tampered with, or password was incorrect 这是由于android规定自己定义 ...

  9. 利用iTextSharp组件给PDF文档添加图片水印,文字水印

    最近在做关于PDF文档添加水印的功能,折腾了好久,终于好了.以下做个记录: 首先会用到iTextSharp组件,大家可以去官网下载,同时我也会在本文中附加进来. 代码中添加引用为:   using S ...

  10. 硬件——STM32 , 录音

    战舰V3的录音程序解析 上一章,我们实现了一个简单的音乐播放器,本章我们将在上一章的基础上,实现一个简单的录音机,实现WAV录音.本章分为如下几个部: 50.1 WAV简介 50.2 硬件设计 50. ...