新增和刪除props的react高階元件

摘要： 嘮叨幾句啦 在看程墨老師的深入淺出高階元件，開頭一點提了一個需要，建立兩個高階元件，一個能給傳入的元素自定義新增props，一個是刪除特定的props。我剛剛做了一下，發現高階元件需要區分好傳入的是class還是react element, 同時也需要注意好return回去的是啥。順便提一...

嘮叨幾句啦

在看程墨老師的深入淺出高階元件，開頭一點提了一個需要，建立兩個高階元件，一個能給傳入的元素自定義新增props，一個是刪除特定的props。我剛剛做了一下，發現高階元件需要區分好傳入的是class還是react element, 同時也需要注意好return回去的是啥。順便提一下高階元件的概念，就說一個函式，能夠接受一個元件作為引數，然後返回的時候，這個元件就帶有這個高階元件給的某些特性。我理解就跟掉泥坑了，得帶點土出來一個道理。

對比一下兩個元件，貼程式碼時刻來啦

刪除屬性的高階元件

我們需要傳入任何元件和引數，都把user引數給刪除了，所以返回值是一個接收props屬性的函式。

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作為引數，返回一個class
return class WrappingComponent extends React.Component {
render () {
return <WrappedComponent {...this.props} {...newProps}/>
} 
}
}

export default addNewProps

使用的時候,返回值是class，所以要用<ReactClassName/>轉換成可以渲染的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的區別。