官网说明
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 的,但是你要多个变量来接收,对于取名强迫症的我是无法接受的,特别有很多路由的情况下,所以综上对比方法三最好用
结语
这个小技巧只是我无意中发现的,估计很多人都已经用上了甚至。但是我还是小小的总结一下,??