Question

有一个水疗中心，用于react / redux。品牌是一个组成部分。 Media组件与此相似，但是数据是从另一个Ajax请求中检索的。我正在尝试从Brands继承，但是由于某些原因，componentDidMount是从Brands启动的。怎么做对呢？

class Media extends Brands {
  loadData = async () => {
  alert('sdfdf'); //not displayed
    const { dispatch, dataList, clientId } = this.props;
    if (!dataList && clientId) {
      dispatch(mainLoaderActions.addBlockingRequest("loadMedia"));

      const res = await mediaApi.getBrandsData(clientId);

      dispatch(dataActions.setBrandsList(res));
      dispatch(mainLoaderActions.deleteBlockingRequest("loadMedia"));
    }
  };

  componentDidMount() {
    alert('aaa'); //not displayed
    this.loadData();
  }

  render() {...

Answer 1

React不支持类继承，因此很困难！在此处查看文档：{{3}}在此处有一个类似问题的答案：https://reactjs.org/docs/composition-vs-inheritance.html并举例说明了实现此目标的“反应”方式。

Answer 2

可以通过使用HOC（高阶组件）来完成。它将需要重构这两个功能，以反应方式重用组件的常见行为。从官方的反应文档中查看此帖子： Higher-Order Components

高阶组件（HOC）是React中用于重用组件逻辑的高级技术。

如何在React中重新定义组件？

2 个答案: