React高階組件HOC（二）代理方式的高階組件

上文提到react高階組件的基本概念以及基本使用方式，下面將介紹高階組件的應用方式。

代理方式的高階組件

返回的新組件直接繼承於React.Component類，新組件做爲傳入組件的一個代理，在新組件中渲染出被包裹組件。除了高階組件本身要作的事情之外，其他所有由被包裹組件來作。
其有四種操做：

一、操縱props。
二、訪問ref。
三、抽取狀態。
四、包裝組件。

1.操縱props：
咱們拿組件B來作演示，給B加一個屬性name。

import React from 'react';
import B from './components/B'
import C from './components/C'
import './App.css';

class App extends React.Component {

  render() {
    return (
      <div>
        <B name='李雷' />
        <C />
      </div>
    );
  }
}

在B組件中把name經過props顯示出來，可是發現上面並未對sex屬性賦值，咱們能夠在高階組件中進行傳入。

import React, { Component } from 'react'
import A from './A'

@A
class B extends Component {
  render() {
    console.log(this.props)
    return (
      <div>
        <div>這是組件B</div>
        <div>個人名字：{ this.props.name }</div>
        <div>個人性別：{ this.props.sex }</div>
      </div>
    )
  }
}

export default B

首先把根節點的props透傳入組件B中，在添加一個新的屬性sex。

import React, { Component } from 'react'

export default function A(WrappedComponent) {
  return class A extends Component {
    render() {
      return (
        <div className="box">
          <div>我是公共組件A的內容</div>
          <WrappedComponent {...this.props} sex={'男'} />
        </div>
      )
    }
  }
}

最終達到咱們操做props的要求：

2.訪問ref：
經過ref訪問調用C的實例

import React, { Component } from 'react'

export default function A(WrappedComponent) {
  return class A extends Component {
    refContent(instance) {
      instance.putOutComponent && console.log(instance.putOutComponent())
    }
    render() {
      return (
        <div className="box">
          <div>我是公共組件A的內容</div>
          <WrappedComponent { ...this.props } sex={ '男' } ref={ this.refContent } />
        </div>
      )
    }
  }
}

在C中加入putOutComponent方法

import React, { Component } from 'react'
import A from './A'

class C extends Component {
  putOutComponent() {
    return '這是組件C'
  }

  render() {
    console.log(this.props)
    return (
      <div>這是組件C</div>
    )
  }
}

export default A(C)

控制檯中顯示組件C中內容方法，這樣能夠控制全部被包裹組件，以便與業務擴展。

3.抽取狀態：
把input的value值和onInputChange方法從高階組件中以props方式傳入。

import React, { Component } from 'react'
import A from './A'

@A
class B extends Component {

  render() {
    return (
      <div>
        <input type='text' {...this.props} />
        <br />
        <div>這是組件B</div>
        <div>個人名字：{ this.props.name }</div>
        <div>個人性別：{ this.props.sex }</div>
      </div>
    )
  }
}

export default B

設置newProps把value值和onInputChange傳入，當輸入內容改變時便會觸發高階組件onInputChange方法從而獲取改變值的內容，一樣能夠在C組件中加入input在A高階組件中進行控制。

import React, { Component } from 'react'

export default function A(WrappedComponent) {
  return class A extends Component {
    constructor(props) {
      super(props)
      this.state = {
        value: ''
      }
    }

    refContent(instance) {
      instance.putOutComponent && console.log(instance.putOutComponent())
    }

    onInputChange = (e) => {
      console.log(e.target.value)
      this.setState({
        value: e.target.value
      })
    }

    render() {
      const newProps = {
        value: this.state.value,
        onInput: this.onInputChange
      }
      return (
        <div className="box">
          <div>我是公共組件A的內容</div>
          <WrappedComponent { ...this.props } sex={ '男' } ref={ this.refContent } {...newProps} />
        </div>
      )
    }
  }
}

4.包裝組件：
包裝組件指咱們能夠在高階組件中設置公共部分，<div>我是公共組件A的內容</div>這裏就是對組件的包裝。

return (
        <div className="box">
          <div>我是公共組件A的內容</div>
          <WrappedComponent { ...this.props } sex={ '男' } ref={ this.refContent } {...newProps} />
        </div>
      )

以上就是代理方式的高階組件介紹。