嘮叨幾句啦
在看程墨老師的深入淺出高階組件，開頭一點提了一個需要，創建兩個高階組件，一個能給傳入的元素自定義添加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的區別。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
