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. docker进入容器的几种方法

    一 启动进入容器指定bash 退出后容器关闭 [root@Centos-node3 ~]# docker run -it centos bash [root@83c6b25aca09 /]# 二 do ...

  2. Oracle自定义类型在C#中调用示例

    1.C#代码: 1)using Oracle.DataAccess.Types; using System; using System.Collections.Generic; using Syste ...

  3. Maven在dos窗口中的命令

    转自:https://www.cnblogs.com/zyjava/p/4310957.html 1.配置环境变量 MAVEN_HOME : D:\apache-maven-3.0.2 MAVEN : ...

  4. vue 图片lazyload

    今天看到我一醉哥的一篇朋友圈分享:<不如我们从头来过 | 掘金> 看完之后,百感交集,互联网的浪潮使创业公司如雨后春笋般崛起, 每一个初创公司都会有一群怀着美好愿景的小伙伴, 但是当寒冬来 ...

  5. JS学习笔记 - fgm练习 2-11- 改变图片路径 var img = new Image(); 图片预加载

    <style> *{ margin: 0;padding: 0; list-style: none; } body{ background: black; } .outer{ margin ...

  6. StackExchange.Redis 官方文档

    原文:StackExchange.Redis 官方文档 时隔多年的翻译终于完成了第六个,也是很重要的的官方文档,是介绍有关链接管理,管道流水线和多路复用的 官方地址在这里:官方文档 下面做个汇总: S ...

  7. Ansible 部署

    环境: vim /etc/hosts 192.168.199.61 Ansible 192.168.199.60 Nginx1192.168.199.62 Nginx2192.168.199.63 H ...

  8. ios获取系统时间

    //获取系统时间 NSDate * date=[NSDate date]; NSDateFormatter *dateformatter=[[NSDateFormatter alloc] init]; ...

  9. Linux环境编程之共享内存区(一):共享内存区简单介绍

    共享内存区是可用IPC形式中最快的.一旦内存区映射到共享它的进程的地址空间,进程间数据的传递就不再涉及内核.然而往该共享内存区存放信息或从中取走信息的进程间通常须要某种形式的同步.不再涉及内核是指:进 ...

  10. 英特尔投资:7200万美元投资12家创新公司,包括3家中国公司(www.intelcapital.com)

    集微网消息,英特尔投资——英特尔公司全球投资机构,今天在英特尔投资全球峰会上宣布向12家科技创业公司投资超过7200万美元.加上今天宣布的新投资,英特尔投资在2018年投资总额已超过1.15亿美元. ...