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的更多相关文章

  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. Log4j.properties 属性详解以及 LOG4J日志级别详解

    转自:https://blog.csdn.net/lovely0903jpp/article/details/82261607 假如项目的生产环境上增加请求以及响应信息的打印,这个时候,对于新手来说, ...

  2. Spring MVC handler interceptors example--转载

    原文地址:http://www.mkyong.com/spring-mvc/spring-mvc-handler-interceptors-example/ Spring MVC allow you ...

  3. 使用差分VHD启动Win7

    平台:windows 8.1 目的:在VHD里装个Win7 介绍:建立VHD装系统姑且不表,比较有意思的是用差分VHD备份系统这点. 差分硬盘这个概念在虚拟机里常用,类似VM中的快照,不过差分硬盘更灵 ...

  4. Jquery+Ajax+Bootstrap Paginator实现分页的拼接

    效果图如下 jsp页面引入bootstrap样式,jquery和bootstrap-paginator.js <link type="text/css" rel=" ...

  5. HTTP网络协议(三)

    HTTP首部字段有四种类型:通用首部字段,请求首部字段,响应首部字段,实体首部字段.  通用首部字段: 首部字段 说明 Cache-Control 控制缓存的行为 Connection 逐跳首部.连接 ...

  6. windows下安装emscripten

    windows下安装emscripten windows下安装emscripten需要python.git环境 python安装 git安装 开始安装 # 1.克隆emsdk git clone ht ...

  7. Fiddler--功能简介

    Fiddler的基本介绍 Fiddler的官方网站:  www.fiddler2.com Fiddler官方网站提供了大量的帮助文档和视频教程, 这是学习Fiddler的最好资料. Fiddler是最 ...

  8. DE1-SOC学习

    https://people.ece.cornell.edu/land/courses/ece5760/DE1_SOC/HPS_peripherials/index.html https://peop ...

  9. Oracle中暂时表空间的清理

    作者:iamlaosong Oracle暂时表空间主要用来做查询和存放一些缓冲区数据. 暂时表空间消耗的主要原因是须要对查询的中间结果进行排序.暂时表空间的主要作用: 索引create或rebuild ...

  10. Codeforces Round #258 (Div. 2)——B. Sort the Array

    B. Sort the Array time limit per test 1 second memory limit per test 256 megabytes input standard in ...