react高階組件添加和刪除props

更新時間：2019年04月26日 10:02:38 作者：supportlss

這篇文章主要介紹了react高階組件添加和刪除props，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

嘮叨幾句啦

在看程墨老師的深入淺出高階組件，開頭一點提了一個需要，創(chuàng)建兩個高階組件，一個能給傳入的元素自定義添加props，一個是刪除特定的props。我剛剛做了一下，發(fā)現(xiàn)高階組件需要區(qū)分好傳入的是class還是react element, 同時也需要注意好return回去的是啥。順便提一下高階組件的概念，就說一個函數(shù)，能夠接受一個組件作為參數(shù)，然后返回的時候，這個組件就帶有這個高階組件給的某些特性。我理解就跟掉泥坑了，得帶點土出來一個道理。

對比一下兩個組件，貼代碼時刻來啦

刪除屬性的高階組件

我們需要傳入任何組件和參數(shù)，都把user參數(shù)給刪除了，所以返回值是一個接收props屬性的函數(shù)。

import React from "react"

function removeUserProp(WrappedComponent) {
  return function newRender(props) {
    const {user, ...otherProps} = props;// 刪除user這個屬性值
    return <WrappedComponent {...otherProps} />
  }
}

export default removeUserProp

使用的時候

 const RemoveComponent = removeUserProp(reactComponentClass)({user: "aa"});// 這里返回的是一個react component
 render () {
  return <div>
        {RemoveComponent}
      </div>
 }

增加屬性的高階組件

import React from "react"

const addNewProps = function (WrappedComponent, newProps) {// 接收的是一個class作為參數(shù)，返回一個class
  return class WrappingComponent extends React.Component {
    render () {
      return <WrappedComponent {...this.props} {...newProps}/>
    } 
  }
}

export default addNewProps

使用的時候,返回值是class，所以要用<ReactClassName/>轉(zhuǎn)換成可以渲染的react組件

  const AddUserComponent = addNewProps(SampleComponent, {user: "aa"})
  render () {
    return <AddUserComponent />
  }

完整的使用的例子代碼：

import React from "react"
import addNewProps from './addNewProps'
import removeUserProp from './removeUserProp'

class SampleComponent extends React.Component {

  constructor(props) {
    console.log(props)
    super(props)
  }

  render () {
    console.log(this.props)
    return <div>
        {
         this.props.user ? <p>哈哈哈</p> : <p>哈哈哈2</p>
        }   
        </div>
  }
}


class Test extends React.Component {

  render () {
    var obj = {aa: "aa"}
    const AddUserComponent = addNewProps(SampleComponent, {user: "aa"})
    const RemoveUserComponent = removeUserProp(SampleComponent)({user: "aa"})
   
    return <div>
         <AddUserComponent />
         {RemoveUserComponent}
        </div>
    
  }
}

export default Test

一點點小收獲就是明白了高階組件要看清楚輸入輸出。class跟react element的區(qū)別。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: