Arrays 向组件数组添加样式

我想将内联样式添加到React组件的数组中，有人知道如何在不将高度直接添加到“ProductComponent”的情况下最好地执行此操作吗

该组件有三个嵌套的div，我只想为数组中的每个组件将样式添加到父div中。我想在一个ScrollableList组件中实现这一点，该组件接受一个ProductComponents数组。我想在每个产品组件上添加“高度：33%”

我的“产品组件”

  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>
          );
      }
  }

类ProductComponent扩展组件{
render（）{
返回(
{Name}
英镑{价格}
);
}
}

我在另一个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>
  )
}

render（）{
常量数组=this.props.children
const children=array.map（ProductComponent=>{
返回(
将样式“高度：33%”添加到div productContainer
}
返回(
{儿童}
)
}

如果它总是高度为33%或其他一些已知的样式，那么您就不能将其硬编码到组件中吗

比如：

如果要从可滚动列表组件向下传递高度，可以执行以下操作：

可滚动列表

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

render（）{
返回(
{this.props.children.map（（组件）=>
组分）}
}

如果它总是高度为33%或其他一些已知的样式，那么您就不能将其硬编码到组件中吗

比如：

如果要从可滚动列表组件向下传递高度，可以执行以下操作：

可滚动列表

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

render（）{
返回(
{this.props.children.map（（组件）=>
组分）}
}

最好的方法是将

高度作为道具向下发送到每个组件，并将默认值设置为
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>
})

如果要使用此数据，第一个
ProductComponent
的高度将为33%，第二个25px。希望这有帮助！
最好的方法是将
高度作为道具向下发送到每个组件，并将默认值设置为
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>
})

如果要使用此数据，第一个
ProductComponent
的高度将为33%，第二个将为25px。希望这有帮助！
好的，我在

{children.map（元素=>{
返回(
)
})}

允许我将样式内联指定给阵列中的每个组件。
一个关于
的例子好的，我在

{children.map（元素=>{
返回(
)
})}

允许我将样式内联指定给阵列中的每个组件。
例如
我想确定ScrollableList组件中每个产品的高度，而不是ProductComponent。您什么时候创建子数组？也许您可以将高度作为道具传递到该点？我想让可滚动列表可重用，并让它采用一个道具来确定可滚动窗口的高度。我也是这样做的在中，我不想将滚动条添加到ProductComponent。这是迄今为止最好的一次。
render（）{const array=This.props.children array.forEach（函数（ProductComponent）{return（）}return（{array}）}
编辑以添加另一个选项-与您描述的类似，但功能更强大？我想确定ScrollableList组件中每个产品的高度，而不是ProductComponent。您何时创建子项数组？也许您可以在此时将高度作为道具传递？我想使ScrollableList可重用，并让它使用一个决定可滚动窗口高度的道具。因此我不想将滚动添加到ProductComponent。这是迄今为止我得到的最好结果。
render（）{const array=This.props.children array.forEach（函数（ProductComponent）{return（）}return（{array}）
编辑以添加另一个选项-与您描述的内容类似，但功能更强大？为什么要添加内联样式而不是仅添加具有关联样式的类？为什么要添加内联样式而不是仅添加具有关联样式的类？最佳答案！完全符合我的要求。最佳answer！做了我想做的。
const arrayOfProducts = [
  {
    ImageUrl: 'exampleImgUrl',
    Name: 'exampleName',
    Price: '$3.00'
  },
  {
    height: 25px,
    ImageUrl: 'exampleImgUrl',
    Name: 'exampleName',
    Price: '$3.00'
  },
]

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