Question

我正在尝试使用用户角色来确定是否显示组件。因此，我试图使用HOC来处理该功能，但是我收到一个错误消息，我不太了解。这是代码：

// init Isotope
  var $grid = $('.grid').isotope({
    itemSelector: '.grid-item',
    percentPosition: true,
    masonry: {
      columnWidth: '.grid-sizer'
    }
  });

  // Make filtering work
  $('.filter-button-group').on( 'click', 'button', function() {
    var filterValue = $(this).attr('data-filter');
    $grid.isotope({ filter: filterValue });
  });

  // layout Isotope after each image loads
  $grid.imagesLoaded().progress( function() {
    $grid.isotope('layout');
  });

  // Highlight the active filter
  $('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );

  $buttonGroup.on( 'click', 'button', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $(this).addClass('is-checked');
  });
});

我收到的错误是：import React from 'react'; import { getUserRoles } from 'modules/api/account/user/selectors'; import { connect } from 'react-redux'; const RestrictedOrFallBack = ({ wrappedComponent, role, userRoles, fallback, }) => { if (userRoles.includes(role)) return wrappedComponent; return fallback; }; const mapStateToProps = state => ({ userRoles: getUserRoles(state), }); const ConnectedRestrictedOrFallback = connect(mapStateToProps)(RestrictedOrFallBack); export { RestrictedOrFallBack }; export default ({ role, fallback = () => (<div />), }) => WrappedComponent => ( <ConnectedRestrictedOrFallback role={role} fallback={fallback} WrappedComponent={WrappedComponent} /> );

我在做什么错了？

编辑：根据答案更新了代码

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <Connect(RestrictedOrFallBack) />

Answer 1

您不能“连接” HOC。 “连接” 返回 HOC本身，而HOC只能应用于实际组件。

您要尝试的是compose 2个HOC以形成新的HOC。

所以您会做类似的事情：

import { connect, compose } from 'redux';

const ConnectedRestrictedOrFallback = compose(
    connect(mapStateToProps),
    RestrictedOrFallback
);

尝试连接HOC

1 个答案: