1. 程式人生 > >react 高階元件設定顯示名稱

react 高階元件設定顯示名稱

HOC設定顯示名稱,程式碼舉例

function HOC(WrappedComponent) {
  class HOC extends React.Component {
    render() {
      return <WrappedComponent {...this.props} />;
    }
  }
  HOC.displayName = `HOC(${getDisplayName(WrappedComponent)})`;

  return HOC;
}

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || "Component";
}

const ContainerComponent = HOC(Welcome);

ReactDOM.render(
  <ContainerComponent name="leon" />,
  document.getElementById("root")
);


這樣在react developer tools 中HOC顯示的就是HOC(Welcome)了


相關推薦

react 高階元件設定顯示名稱

HOC設定顯示名稱,程式碼舉例 function HOC(WrappedComponent) { class HOC extends React.Component { render()

react高階元件

1 高階元件就是一個函式,且該函式接受一個元件作為引數,並返回一個新的元件 import React, { Component } from 'react'; import simpleHoc from './simple-hoc'; class Usual extends Component

深入淺出理解 React高階元件

開始之前,有兩點需要說明一下:1、React 高階元件 僅僅是一種模式,並不是 React 的基礎知識;2、它不是開發 React app 的必要知識。你可以略過此文章,仍然可以開發 React app。然而,技多不壓身,如果你也是一位 React 開發者,強烈建議你掌握它。 一、為什麼需要高階元

深入react 高階元件

高階元件: 返回值是一個函式的那麼一個函式 基本算是個類工廠方法 W (WrappedComponent) 是被包裹的 React.Component;而函式返回的 E (Enhanced Component) 則是新得到的 HOC,也是個 React.Compone

帶著三個問題深入淺出React高階元件

前言 "高階"二字聽起來非常唬人,因為大學高數課上的高階方程讓人抓狂,從而讓第一次接觸"高階元件"概念的人們誤以為又是什麼高深的思想和複雜的邏輯。但相信在你學習完成後和生產環境大量使用過程中,就會發現這個所謂"高階元件"真的一點也不高階,非常簡單易懂。本文通過回答三個問題帶你深入淺出React高

ES 6 裝飾器與 React 高階元件

關於 Decorator 到底是 ES 6 引入的還是 ES 7 引入的我也不是很明白了,兩種說法都有,這種問題懶得糾結了……在用的時候發現這個東西很好用,平常用處可能不大,但是結合 React 就很好使了。接下來就講一講。 一、環境搭建 我搭建了一個 React 開發環境,結合 babel 的外掛——b

React高階元件精講

一、基本概念 高階函式是以函式為引數,並且返回也是函式的的函式。類似的,高階元件(簡稱HOC)接收 React 元件為引數,並且返回一個新的React元件。高階元件本質也是一個函式,並不是一個元件。高階元件的函式形式如下: const EnhanceComponen

React 高階元件

本文將探討如何構建更易於複用,更為靈活的React高階元件。 在實際的應用開發中,多個React元件之間可能需要共用一段完成某些特定功能的程式碼,那麼如何在不同的元件間複用這段程式碼就成了一個值得思考的問題(或者說,如何建立具有類似功能的,不同的React元件)。 在

當初要是看了這篇,React高階元件早會了

概況: 什麼是高階元件? 高階部件是一種用於複用元件邏輯的高階技術,它並不是 React API的一部分,而是從React 演化而來的一種模式。 具體地說,高階元件就是一個接收一個元件並返回另外一個新元件的函式! 這是官方文件說的,我沒有截全,因為後面的解釋會造成誤解,但簡單講

R6- React高階元件詳解

看題目感覺好高階的樣子,千萬不要被名字嚇到,它一點都不高深。 按照慣例先上圖,這一章的概覽: 1.從高階函式說起 維基百科對高階函式的定義: 在數學和電腦科學中,高階函式是至少滿足下列一個條件的函式: 接受一個或多個函式作為輸入 輸出一個函式 是不是很

React 高階元件(附加自己的Demo)

高階元件 1.函式可以作為引數被傳遞   setTimeout(() => {         console.log(1)     }, 1000 ); 2.函式可以作為

react——高階元件

引入及概念 1.js中高階函式:一個函式就可以接收另一個函式作為引數,這種函式就稱之為高階函式。 function add(x, y, f) { return f(x) + f(y); } //當呼叫add(-5, 6, Math.abs)時,引數x,y和f分別接收-5

React高階元件(表單)應用回顧

1. 首先介紹函數語言程式設計: function hello(){ console.log('大家好,我是harry!') } function getWord(fn){ return function(){ console.log('大

React高階元件原理與在Redux中的實踐

建議在github閱讀,我會及時更新部分內容。也歡迎star,issue 1.高階reducer的定義 高階reducer指的是一個函式,該函式接收一個reducer函式作為引數或者返回一個reducer函式作為函式的返回值。高階reducer也可以被看做為

react高階元件之經典應用:許可權控制

許可權控制算是軟體專案中的常用功能了。在網站中,許可權控制一般分為兩個維度:頁面級別和頁面元素級別。我們來說說頁面元素粒度的許可權控制。在某個頁面中,有個“建立使用者”的按鈕,管理員才能看到。一般想到的做法類似這樣class Page extends Component{

React高階元件的應用及講解

我的應用場景 通常我會通過高階元件去優化之前老專案寫的不好的地方,比如兩個頁面UI幾乎一樣,功能幾乎相同,僅僅幾個操作不太一樣,卻寫了兩個耦合很多的頁面級元件。當我去維護它的時候,由於它的耦合性過多,經常會新增一個功能(這兩個元件都要新增),我要去改完第一個的時候,還要改第

react高階元件淺談

引入及概念 1.js中高階函式:一個函式就可以接收另一個函式作為引數,這種函式就稱之為高階函式。 function add(x, y, f) { return f(x) + f(y); } //當呼叫add(-5, 6, Math.abs)時,引

理解 React 高階元件

1. 什麼是高階元件? 高階元件就是一個函式,它接受另一個元件作為引數,並返回一個新的元件。 當 React 元件被包裹時(warped),高階元件會返回一個增強的 React 元件。 高階元件讓程式碼更具有複用性、邏輯性和抽象特性。 2. 為什麼

react使用總結一:react 高階元件使用

1.IntervalEnhance.js定義高階元件 // 高階元件 // 主要用於替代舊的mixins import React from 'react'; //1.還記得箭頭函式嗎?沒錯,這

React總結篇之六_React高階元件

高階元件的概念及應用 以函式為子元件的模式這兩種方式的最終目的都是為了重用程式碼,只是策略不同,各有優劣,開發者可以在實際工作中決定採用哪種方式。 一、高階元件1. 高階元件(Higher Order Component,HOC)並不是React提供的某種API,而是使用React的一種模