Javascript 我可以在connect redux中传递多个组件吗

我希望有一个智能组件/容器来处理产品实体的CRUD操作，我有以下代码：

function productContainerRender(WrappedComponent) {
    return class extends React.Component {
        constructor(props) {
            super(props);
            this.fetchProducts = this.fetchProducts.bind(this);
        }

        fetchProducts = (page) => {
            this.props.dispatch(fetchProductsBegin());
            productsApi.getAll(page)
                .then(response => {
                    if (response.data) {
                        this.props.dispatch(fetchProductsSuccess(response.data._embedded.companies));
                    } else {
                        this.props.dispatch(fetchProductsFailure({message: "Fetching products failed"}));
                    }
                });
        };

        componentDidMount() {
            // this.fetchProducts(1);
        }

        render() {
            // ... and renders the wrapped component with the fresh data!
            // Notice that we pass through any additional props
            return <WrappedComponent {...this.props} fetchProducts={this.fetchProducts} />;
        }
    }
}

const productSelector = createSelector(
    state => state.products,
    items => items,
    loading => loading,
    error => error,
);

const mapStateToProps = createSelector(
    productSelector,
    (products) => ({
        products,
    })
);

const ListProducts = productContainerRender(
    ListProductComponent
);

const AddProduct = productContainerRender(
    AddProductComponent
);

export default connect(mapStateToProps)(ListProducts,AddProduct);

当我尝试从应用程序组件调用时，它总是显示出来

---

你知道怎么做吗？这样我就可以从应用程序的任何地方导出ListProducts、AddProduct和call。你只能通过一个组件进行连接。因此，您必须进行两次连接：

const ConnectedListProducts = connect(mapStateToProps)(ListProducts)
const ConnectedAddProduct = connect(mapStateToProps)(AddProduct)

---

由于只能有一个默认导出，因此在本例中必须使用命名导出，或者将这两个组件拆分为两个文件。

只能传递一个组件进行连接。因此，您必须进行两次连接：

const ConnectedListProducts = connect(mapStateToProps)(ListProducts)
const ConnectedAddProduct = connect(mapStateToProps)(AddProduct)

---

由于您只能有一个默认导出，因此在这种情况下，您必须使用命名导出，或者将这两个组件拆分为两个文件。

一次调用connect不能同时返回多个组件，请记住，您是导出默认值，只应返回一个函数/组件，请记住，connect一次只返回一个组件，因此您可以这样做

export default {
  ListProduct: connect(mapStateToProps)(ListProducts),
  AddProduct: connect(mapStateToProps)(AddProduct)
}

因此，在导入组件时，您可以执行以下操作

import Components from ‘.../your/path’;
class MyView extends React.Component{
  render(){
    return <Components.ListProducts/>
  }
}

---

一次调用connect不能同时返回多个组件，请记住，您是导出默认值，应该只返回一个函数/组件，请记住connect一次只返回一个组件，因此您可以这样做

export default {
  ListProduct: connect(mapStateToProps)(ListProducts),
  AddProduct: connect(mapStateToProps)(AddProduct)
}

因此，在导入组件时，您可以执行以下操作

import Components from ‘.../your/path’;
class MyView extends React.Component{
  render(){
    return <Components.ListProducts/>
  }
}

---

这是一个很好的完整示例，适用于需要更多帮助的人这是一个很好的完整示例，适用于需要更多帮助的人检查此复选框