嘮叨幾句啦

在看程墨老師的深入淺出高階組件，開頭一點提了一個需要，創建兩個高階組件，一個能給傳入的元素自定義添加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的區別。