Question

我将创建SmartForm组件来处理表单。

此组件应获取handleError和handleWarning方法作为props来处理表单提交结果。此方法将触发来自MessageActions.js的操作：

  addWarning: (header, message) => {
    AppDispatcher.dispatch({
      actionType: MessageConstants.ADD_MESSAGE,
      messageType: MessageConstants.WARNING_MESSAGE,
      header,
      message,
    });
  },

  addError: (header, message) => {
    AppDispatcher.dispatch({
      actionType: MessageConstants.ADD_MESSAGE,
      messageType: MessageConstants.ERROR_MESSAGE,
      header,
      message,
    });
  },

我将在许多其他文件中使用SmartForm。因此，我必须多次导入MessageActions.js并传递给将要运行它的组件方法。

示例：SmartForm的任何父项：

import MessageActions from './actions/MessageActions';

 ...

handleError = (header, error) => {
  MessageActions.addError(header, error);
};

handleWarning = (header, warning) => {
  MessageActions.handleWarning(header, warning);
};

 ...

render () {

  ...

  return <SmartForm handleError={this.handleError} handleWarning={this.handleWarning} />
}

我不喜欢这样，因为我必须多次MessageActions.js导入和定义handleError和handleWarning方法。

此外，我也不想将此代码移至SmartForm组件中，因为我将保持该组件可重复使用且独立于操作（在其他项目中，我应使用handleWarning和{{ 1}}将有所不同。

可能我应该创建HOC组件，该组件将包装我所有的handleError组件，并进行SmartForm的导入以及MessageActions.js和handleError的定义（复制粘贴代码）在里面？

还是最好在handleWarning的每个父级中导入MessageActions.js和handleError和handleWarning的定义？

还有其他解决方案吗？

使用HOC避免多次导入？

0 个答案: