關於 react createFactory 的小技巧

官網說明

React.createFactory

factoryFunction createFactory(
  string/ReactClass type
)
複製代碼

上面函數返回一個用於生成給定類型的ReactElement的函數，相似於 React.createElement。對於type參數能夠是html標籤名字（例如：「div」，「li」, 運行之後生成一個 jsx 對象

官方🌰

建立一個 ul

var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
ReactDOM.render(root, document.getElementById(content));
複製代碼

先介紹基本用法，而後介紹和 hoc 結合在一塊兒使用

結合 hoc

我最近寫組件的時候 要給全部的頁面加上返回的主頁的頭，再想怎麼最省事。懶病發做

方法一 傳統組件形式

// Layout 是頭部組件
 < Layout>{this.props.children}</Layout>
複製代碼

可是每一個頁面都要加 layout 頭，太煩了太煩了

方法二 extends

import React, { Component } from 'react'
// Component.js
class App extends Component {
     
      render () {
        return (
            <Layout/>
              {this._render()}
            </Layout>
        )
      }
  }
}
export default Hoc App
// 調用
import  Component from  './Component'
class Home extends Component {
    ...
    _render () => hello
}
複製代碼

這樣也是 ok 的但感受總有點奇怪沒有 render 方法

方法三 hoc + createFactory

import React, { Component, createFactory } from 'react'
import { compose  } from 'recompose'
const app = (BaseComponent) => {
  return class extends Component {
      handleClick = () => {
        this.props.history.goBack('/home')
      }
      render () {
        return <div>
          <Layout>
            <BaseComponent {...this.props} {...this.state} />
          <Layout/>
        </div>
      }
  }
}
// const Hoc = (c) => createFactory(app(c))
export default compose(
    createFactory, app
)
// route 這邊能夠直接這麼調用
import { Hoc } from 'lib'
const routes = [
  {
    title: '首頁',
    path: '/home',
    component: Hoc(Home),
    exact: true
  }
  ]
複製代碼

這裏我爲什麼用 createFactory 這麼包一層呢，正常咱們不包的話用的時候估計要這樣使用

const Button = Hoc(<BaseComponent />) <Button>1234</Button> 複製代碼

這樣也是 ok 的，可是你要多個變量來接收，對於取名強迫症的我是沒法接受的，特別有不少路由的狀況下，因此綜上對比方法三最好用

結語

這個小技巧只是我無心中發現的，估計不少人都已經用上了甚至。可是我仍是小小的總結一下，😆😆