Question

我正在开发一个应用程序，最初我想确保在进行任何进一步的开发之前，我能够正确理解React中的容器范例。

我了解容器组件或智能组件更像是一个数据处理程序，此处未表示。转储组件只是一个无状态组件，主要是UI。

到目前为止，我有一个示例，目前我的index.js如下所示：

ReactDOM.render(
    <Provider store={store}>
        <Router>
            <Switch>
                <Route exact path="/" component={AppComponent}/>
                <Route exact path="/products" component={ListProductComponent} />
                <Route path="/products/:productId" component={AddProductComponent} />
            </Switch>
        </Router>
    </Provider>
    , document.getElementById('root')
);

容器组件：

class ProductContainer extends React.Component {
    constructor(props) {
        super(props);
        this.fetchProducts = this.fetchProducts.bind(this)
    }

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

     addProduct = () => {

     };

    componentDidMount() {
        this.fetchProducts();
    }

    render() {
        const {products} = this.props;
        return (
            <div className="ProductComponent">
                <h2>ProductComponent</h2>
                <Button color="danger" onClick={this.fetchProducts}>Load Products</Button>
                <ListProductComponent products={products}/>
                <AddProductComponent/>
            </div>
        );
    }
}

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

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

export default connect(mapStateToProps)(ProductContainer);

转储组件：

import React from 'react';
import './product.style.scss';
import LoadingBar from "../LoadingStatus/loading.component";

const ListProductComponent = (props) => (
    <div className="ListProductComponent">
        <h2>ListProductComponent</h2>
        <LoadingBar loading={props.products.loading}/>
        <div>
            <ul>
                {
                    props.products.items.map((item, index) =>
                        <li key={index}>{item.name}</li>
                    )
                }
            </ul>
        </div>
    </div>
);

export default ListProductComponent

另一个转储组件：

import React from 'react';
import './product.style.scss';

const AddProductComponent = (props) => (
    <div className="AddProductComponent">
        <h2>AddProductComponent</h2>
    </div>
);

export default AddProductComponent

首先，我不确定在index.js中的路由器中是否必须始终在组件属性中传递容器组件或转储组件。其次，我需要为每个列表产品添加一个单独的容器吗？从目前开始，我只有一个产品容器，可以进行粗加工操作。让我感到困惑的一件事是，如果我只想显示添加产品转储组件，该怎么做？或仅显示列表产品？

我不确定我是否正确理解了容器的目标，有人可以举例说明为什么我会以常规方式使用容器方法吗？

容器方法如何在React上真正起作用

0 个答案: