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

Question

我见过博客，指出所有HOC都可以转换为渲染道具。

我的守则中有此HOC。我想知道是否可以将其转换为渲染道具。

这是一个连接的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

如果您正在谈论这种模式，那么我会说这是方法。

包装器：

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文件。