Добавление стиля к массиву реагирующих компонентов

Question

Я хочу добавить inline стиль массиву React Components, кто-нибудь знает, как лучше всего это сделать без добавления высоты непосредственно в «ProductComponent»?

Компонент имеет три вложенных divs. Я просто хочу добавить стиль к родительскому div для каждого компонента в массиве. Я хочу сделать это в компоненте ScrollableList, который принимает массив ProductComponents. Я хочу добавить «height: 33%» на каждый ProductComponent.

My 'ProductComponent'.

class ProductComponent extends Component { 
    render() {  
     return (
      <div 
       className="productContainer" 
       key={id} 
      > 
       <div className="imageContainer" > 
       <img src={ImageURL} role="presentation" /> 
       </div> 
       <div className="productDetails"> 
       <div className="productName"><strong>{Name}</strong></div> 
       <div className="productPrice">£ {Price}</div> 
       <div className="productBuyButton"> 
       </div> 
       </div> 
      </div> 
     ); 
     } 
    } 

У меня есть массив этих компонентов, которые я использую как дети в другом компоненте ScrollableList.

render(){ 
    const array = this.props.children 
    const children = array.map(ProductComponent => { 
    return(
     add style 'height:33%' to the div productContainer 
    } 
    return(
    <div> 
    {children} 
    </div> 
) 
} 

Answer 1

Если он всегда будет height: 33% или некоторые другие известные стили, то вы не можете просто жёстко его в компонент?

Как:

const product = (props) => 
     <div 
      className="productContainer" 
      style={{height: '33%'}} // This should work? 
      key={id} 
     > 
      <div className="imageContainer" > 
      <img src={ImageURL} role="presentation" /> 
      </div> 
      <div className="productDetails"> 
      <div className="productName"><strong>{Name}</strong></div> 
      <div className="productPrice">£ {Price}</div> 
      <div className="productBuyButton"> 
      </div> 
      </div> 
     </div> 

В качестве альтернативы вы можете просто положить его в CSS:

.productContainer { 
    height: 33%; 
} 

Если вы хотите, чтобы передать высоту от прокрутки компоненты списка вы могли бы сделать это:

Прокручиваемый список

render(){ 
return (
    <div> 
    {this.props.children.map((component) => 
     <div style={{height: '33px'}}>component</div>)} 
    </div> 
} 

Answer 2

Лучшим способом было бы отправить height вниз в качестве опоры для каждого компонента и установить значение по умолчанию 33%.

const arrayOfProducts = this.props.children; 
arrayOfProducts.map((product) => { 
     <div 
      style={{ height: product.height || 33% }} 
      className="productContainer" 
      key={id} 
     > 
      <div className="imageContainer" > 
      <img src={product.ImageURL} role="presentation" /> 
      </div> 
      <div className="productDetails"> 
      <div className="productName"><strong>{product.Name}</strong></div> 
      <div className="productPrice">£ {product.Price}</div> 
      <div className="productBuyButton"> 
      </div> 
      </div> 
     </div> 
}) 

Таким образом, когда вы объявляете массив, который вы можете изменить на 33% с тем, что вы хотите, пока он является действительным height значения, как так.

const arrayOfProducts = [ 
    { 
    ImageUrl: 'exampleImgUrl', 
    Name: 'exampleName', 
    Price: '$3.00' 
    }, 
    { 
    height: 25px, 
    ImageUrl: 'exampleImgUrl', 
    Name: 'exampleName', 
    Price: '$3.00' 
    }, 
] 

Если вы должны были использовать эти данные, первый ProductComponent будет иметь высоту 33% и второй будет иметь высоту 25px. Надеюсь это поможет!

Answer 3

Хорошо, я нашел то, что искал в React Docs.

{children.map(element => { 
    return (
    <element.type 
     {...element.props} 
     style={{ 
     height: '33%', 
     }} 
    /> 
) 
})} 

Позволяет мне назначать стиль inline каждому компоненту массива. Пример: codepen