Question

我是新来反应钩子的人，所以不确定是否有更好的方法来实现以下功能。我有一个功能HOC，可以添加一些动作控件，例如。回复，删除等任何包装的组件。这些动作被实现为功能HOC使用的useActions自定义钩子。我面临的问题是wrappedComponent无法创建。

我必须将Action作为HOC来实现，因为内部包装的组件需要在不同的组件中重用，并且仅在某些情况下需要Action支持。也使它成为函子，因为reactHooks需要它，我们需要在其他地方共享动作处理程序和实现。因此，最好使用自定义钩子。

尝试在wrapperComponent上应用基于类的HOC，并且效果很好。无法破解或介入返回带有包装组件JSX的HOC代码。

// Func HOC that consumes useAction hook. UseAction returns 
arr of actions [reply, delete ]

function ActivityActions(props) {
  const {
    activity,
    classes: {
      actionsContainer,
    },
  } = props;

  const [actions] = useActions(activity.ActivityType);

  return (
    actions.length ?
      <div className={actionsContainer}>
        <ul>
          {
            actions.map(action => (
              <li>
                <Button>
                  {action}
                </Button>
              </li>
            ))
          }
        </ul>
      </div >
      : null
  );
}

// HOC wrapping the component
export const withActions = wrappedComponent => props => (
  <div>
    <wrappedComponent {...props} />
    <activityActions {...props} />
  </div>
);

Wrapped Component ActivityItem export - (ActivityItem just renders some text)
export const ActivityListItem = withActions(ActivityItem);

Final app render 
export default function App() {
  const mockActivity = GetActivity(1, 2, 1, null);

  return (
    <div className="container">
      <span> Activity Item </span>
      <ActivityListItem activity={mockActivity} />
    </div>
  );
}

组件不呈现。期望在包装的组件活动文本图像下方看到“操作”按钮。

在功能HoC中使用React挂钩

0 个答案: