Question

我有很多组件，需要在componentDidMount方法中发送一些ajax函数。我想创建一个HOC，其唯一目的是将一些动画“应用”到组件中，并在解决某个承诺后停止此动画。

当然，我可以复制粘贴每个组件的代码，但我想创建一些处理它的抽象。

问题是，我不知道如何正确地传递函数，从孩子到父母。例如，让我们假设预期的子组件，具有此componentDidMount：

componentDidMount() {
ajax('/costumers')
  .then(({ data }) => {
    this.setState(() => ({ costumers: data.content }))
  })
}

从技术上讲，我需要将此函数作为参数传递给HOC，或者以某种方式“劫持”孩子的componentDidMount（如果可能的话......）。然后，HOC会在加载后应用动画，然后发送ajax，只有当它被解析时，动画才会被消除，并且子组件会被渲染。

如何实现这一目标？

任何想法都将受到赞赏

Answer 1

以下是您为此类案例编写HOC的方法，有关该主题的更多信息，请参阅React docs。

const withLoader = (loader, Component) =>
  class WithLoader extends React.Component {
    state = { ready: false, data: null };

    async componentDidMount() {
      const data = await loader();

      this.setState({ ready: true, data });
    }

    render() {
      if (!this.state.ready) return <div>LOADING</div>; // or <ComponentWithAnimation />

      return <Component data={this.state.data} />;
    }
  };

const Test = props => <div>DATA: {props.data}</div>;

const fakeLoader = () =>
  new Promise(res => setTimeout(() => res("My data"), 1000));

const TestWithLoader = withLoader(fakeLoader, Test);

创建React高阶组件，作为子组件的“加载器”（动画）包装器

1 个答案: