[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 ...
随机推荐
- caffe 在 windows 下的配置(scripts\build_win.cmd)
官网配置文档见:GitHub - BVLC/caffe at windows 1. windows 设置 requirements: visual studio 2013/2015 CMake > ...
- Android 技巧 - Debug 判断不再用 BuildConfig
Android 开发中一般会通过 BuildConfig.DEBUG 判断是否是 Debug 模式,从而做一些在 Debug 模式才开启的特殊操作,比如打印日志.这样好处是不用在发布前去主动修改,因为 ...
- ADO.net简单增删改查
嘿嘿,又到了总结了的时间,今天我们学习了ADO.net,什么是ADO.NET:ADO.NET就是一组类库,这组类库可以让我们通过程序的方式访问数据库,就像System.IO下的类操作文件一样, Sys ...
- setAttribute的浏览器兼容性
1.element要用getElementById 或者是ByTagName来得到 2.setAttribute("class", vName)中class是指改变"cl ...
- python项目实战-小游戏1
项目规则: 1.玩家和敌人分别从现有的角色中选择3个角色 2.随机生成目前的血量,和攻击量 3.游戏规则:当玩家向敌人发起攻击,敌人当前的血量=之前的血量-玩家的血量,同理 4.3局两胜 5.自定义玩 ...
- css中hack是什么
css中hack是什么 一.总结 1.CSS hack:由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览 ...
- [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative
Given a date, we’ll use the react-intl FormattedRelative component to render a date in a human reada ...
- 利用Eclipse+openJTAG调试led.axf文件
转自calvinlee1984 Subject:利用Eclipse+openJTAG调试led.axf文件 Date: 3-Mar-2011 By: Calvinlee1984 ...
- 面向对象的CSS
原文 简书原文:https://www.jianshu.com/p/cb5e9f56ddcc 大纲 1.面向对象的CSS(OOCSS)概念 2.面向对象的CSS的作用 3.面向对象的CSS的注意事项 ...
- 请求筛选模块被配置为拒绝包含 hiddenSegment 节的 URL 中的路径
转自原文 请求筛选模块被配置为拒绝包含 hiddenSegment 节的 URL 中的路径. 打开C:\Windows\System32\inetsrv\config路径 找到applicationH ...