React, JS - komponent i mapowanie

Question

Cześć,

potrzebuję na podstronę wstawić komponent, który będzie wyświetlał cztery produkty w jednym rzędzie. Ten sam komponent na stronie głównej  wyświetla 8 produktów, cztery w jednym rzedzie i cztery w drugim rzedzie. Tu jest część kodu która właśnie sprawia, ze jest wstawianych na stronie 8x produkt:

class NewFurniture extends React.Component {

 (...)
<div
            className={'row' + (isFading ? ' ' + styles.fadeout : ' ' + styles.fadein)}
          >
            {categoryProducts
              .slice(activePage * 8, (activePage + 1) * 8)
              .map((item, i) => (
                <div key={item.id} className='col-6 col-md-4 col-lg-3'>
                  <ProductBox image={image} {...item} number={i} product={item} />
                </div>
              ))
            }
          </div>

}

Na stonie głównej został  zimportowany cały komponent jako :
<NewFurniture />
Teraz ten sam komponent mam zimportować do podstrony. I tu moje pytanie. Czy jest jakas możliwość, aby np w powyzszym kodzie za pomoca if else lub innej opcji wyrenderował produkty, gdzie na stronie głownej bedzie wyswietlało 8 produktów, a na podtronie tylko 4?  Czy może gdy zimportuje <NewFurniture /> do podstrony można to jakoś zredukować?

Comments

Tak z ciekawości, dlaczego używasz komponentów klasowych?

Answer 1

Potrzebne ci są props czyli właściwości które możemy przekazać do komponentu. Dzięki nim możesz sobie zmienić obecne wywołanie na : 
 

<NewFurniture showItems={8} /> 

a tam gdzie masz dodać nowe zrobić 
 

<NewFurniture showItems={4} /> 

Następnie zamieniasz 

.slice(activePage * 8, (activePage + 1) * 8)

na 

.slice(activePage * this.props.showItems, (activePage + 1) * this.props.showItems)

Zachęcam też do poczytania dokumentacji bo są to podstawy :) https://pl.reactjs.org/docs/components-and-props.html