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. HDU 3131 One…Two…Five! (暴力搜索)

    题目链接:pid=3131">HDU 3131 One-Two-Five! (暴力搜索) 题意:给出一串数字,要求用加,减,乘,除(5/2=2)连接(计算无优先级:5+3*6=8*6= ...

  2. arguments对象----不定参数的实现方式

    function format(string) { var args = arguments; var pattern = new RegExp("%([1-" + argumen ...

  3. Flask项目之手机端租房网站的实战开发(十一)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  4. web自动化测试 Selenium2 Java自动化测试实战9_3

    driver.findElement(By.id("idInput")).sendKeys("哈哈"); driver.findElement(By.id(&q ...

  5. Cronolog 分割 Tomcat8 Catalina.out日志 (转)

    默认情况下,tomcat的catalina.out日志文件是没有像其它日志一样,按日期进行分割,而是全部输出全部写入到一个catalina.out,这样日积月累就会造成.out日志越来越大,给管理造成 ...

  6. LeetCode Algorithm 05_Longest Palindromic Substring

    Given a string S, find the longest palindromic substring in S. You may assume that the maximum lengt ...

  7. JS学习笔记 - 面向对象 - 原型

    <script> var arr1 = new Array(12, 55, 34, 78, 676); var arr2 = new Array(12, 33, 1) Array.prot ...

  8. 16进制串与ASCII字符串相互转换

    提供两个函数,方便十六进制串与ASCII 字符串之间的相互转换,使用函数需要注意的是返回的串是在堆上通过 calloc 分配的,所以,记得使用完返回值释放该块,并且将指向该块的指针 =NULL .// ...

  9. Android 最火的高速开发框架AndroidAnnotations使用具体解释

    Android 最火的高速开发框架androidannotations配置具体解释文章中有eclipse配置步骤.Android 最火高速开发框架AndroidAnnotations简介文章中的简介. ...

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