reactjs – How to combine BEM and React components

Question:

Let's say there are two components ProductList and ProductItem

If you use ProductList as a smart component and dump the ProductList component in it via this.props.map() , then you have to use styles for the product-grid block

The code looks something like this:

//ProductList
render() {
            return (
                <div className="product-grid">
                    {this.props.products.map((productData,index)=>
                        <ProductItem key={index} data={productData}/>
                    )}
                </div>
            );
        }

But there should be no style pointers in smart components.

    //ProductItem
<div className="product-card">
                    <div className="product-card__content">
                       <div className="product-card__content__attributes">
                        </div>
                            <img  className="product-card__content__image" src={this.props.data.image} alt=""/>
                        </div>
                    </div>
                </div>

How to drag props from the top components so that it doesn't contradict the Presentational and Container Components approach?

Answer:

Smart components (they are also Containers) are started with one single purpose – to get data from some source and transfer them to Dump components (they are Presentational components) in a form suitable for a Dump component. Those. they play a role similar to the Presenter from the Model-View-Presenter . Often they are not even written by hand, but generated (see connect in React Redux ).

If you adhere to this paradigm, but do not use any libraries, and write everything by hand, then everything should look something like this:

class ProductListContainer extends Component {
  // ...
  render() {
    return <ProductList products={тут вы берете откуда-то данные} />;
  }
  // ...
}

class ProductList extends Component {
  // ...
  render() {
    return (
      <div className="product-grid">
        {this.props.products.map((productData,index)=>
          <ProductItem key={index} data={productData}/>
        )}
      </div>
     );
   }
   // ...
}

class ProductItem extends Component {
  // ...
  render() {
    return (
      <div className="product-card">
        <div className="product-card__content">
        // ...
        </div>
      </div>
    );
  }
  // ...
}

Those. you will have one Smart component ProductListContainer and two Dump components: ProductList and ProductItem .