javascript - 重用 React 组件的业务逻辑

Question

我刚刚开始学习 React，我正在努力理解一种在组件之间重用业务逻辑的好方法。

例如，一个有许多表单提交数据。工作流程始终相同：

1. 填写资料；
2. 点击提交；
3. 显示一个带有加载消息的小吃店；
4. 发送网络请求；
5. 如果请求成功，那么它会显示一个带有成功消息的新快餐栏，并且在某些情况下，它会重定向到不同的路由；
6. 如果请求返回错误，则会显示带有错误消息的小吃栏。

我创建了一个HOC：

function withSubmit(WrappedComponent, request, navigateTo) {
  return class extends Component {
    constructor() {
      super();
      this.state = {
        snackbar: null,
        navigate: null,
      };
    }

    updateSnackbar = snackbar => this.setState({ snackbar });

    handleSubmit = (...params) => {
      this.updateSnackbar('Loading...');

      // API request passed from the parent component to be called only after submitting a form.
      request(...params)
        .then(() => {
          this.updateSnackbar(navigateTo.msg);

          if (navigateTo.url) {
            this.setState({ navigate: navigateTo.url });
          }
        })
        .catch(err => this.updateSnackbar(err.message));
    };

    render() {
      const { navigate, snackbar } = this.state;

      return (
        <div>
          <WrappedComponent onSubmit={this.handleSubmit} />
          <Snackbar
            open={!!snackbar}
            message={snackbar}
          />
          { navigate ? <Redirect to={navigate} /> : null }
        </div>
      );
    }
  };
}

有用。不过，好像有点复杂。有没有更简单的方法来重用该逻辑/流程？

标签： javascriptreactjs