reactjs - 谁能帮我将此 HOC 转换为 Render Prop

Question

我看过一些博客，指出所有 HOC 都可以转换为渲染 Prop 。

我的代码中有这个 HOC。我想知道这是否可以转换为渲染 Prop 。

这是一个连接的 HOC。

import React from 'react';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { modes } from '../../../modes';


const Wrapper = Component => (props) => {
  const { mode, ...rest } = props;
  if (mode === modes.VIEW) {
    return (<Component
      {...rest}
      disabled
    />);
  }

  return (<Component
    {...rest}
  />);
};

const mapStateToProps = state => ({
  mode: state.mode,
});

const composedHOC = compose(
  connect(mapStateToProps, null),
  Wrapper
);

export default composedHOC
;

Answer 1

如果您正在谈论 this pattern ，那么我会说这是如何做到的。

包装:

const WrapperBase = props =>
   props.mode === 'VIEW' ? 
      props.render({...props, disabled: true}) : 
      props.render({...props});

// using same mapStateToProps as in your HOC
const Wrapper = connect(mapStateToProps, null)(WrapperBase);
export default Wrapper;

用法:

<Wrapper render={({disabled}) => <div>disabled: {disabled ? 'true' : 'false'}</div>}/>

单元测试:

describe('Wrapper', () => {
  it('should pass the disabled prop to the inner component', () => {
    const options = {context: {}, childContextTypes: {}};
    const state = {mode: 'VIEW'};
    Wrapper = setStore(options, () => state)(Wrapper);
    const i = mount(<Wrapper render={({disabled}) => <div>disabled: {disabled ? 'true' : 'false'}</div>}/>, options);
    expect(i.html()).toBe('<div>disabled: true</div>');
  });
});

请注意，我使用了字符串 VIEW，因为我没有您的 modes.js 文件。