react 高阶组件

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 64 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000018328170

文章标签：

#javascript #ViewUI

高阶组件本质是函数，参数是组件1 返回组件2，高阶组件是为了复用通用逻辑

高阶组件eg:

import React, { Component } from 'react';

const withPersistentData = data => WrappedComponent => {

  return class extends Component {
    constructor(props) {
      super(props);
    }
    render() {
      return (
        <WrappedComponent data={data} />
      )
    }
  }
}
export default withPersistentData

尝试用定义好的高阶组件

import React, { Component } from 'react';
import HighComponent from './HighComponent';

class LowComponent extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>{this.props.data}</div>
    )
  }
}

const MyComponent = HighComponent('Hello')(LowComponent)
export default MyComponent